Tips on expanding the content of a page all the way to the bottom of

Currently, I am facing an issue while working on a Joomla site where I am struggling to extend a page to the bottom of the screen. Attached is an image of the page: https://i.sstatic.net/uHZ9Q.png and below is the HTML code for the page:

<div id="free_trial_page">
  <div id="free_trial_container">
    <div id="free_title_block"><p id="free_title_text">Welcome to the <span class="hilite_text">Free</span>Introductory Course</p></div>
    <div id="free_title_block"><p id="free_title_text">ยินดีต้อนรับ สู่ คอร์สทดลองเรียน <span class="hilite_text">ฟรี</span>ไทย</p></div>
    <div id="free_item"  class="free_items">
        <p class="free_content_title"> We hope you will enjoy learning English in these pages</p>
         <p class="free_content_title">เราหวังว่าท่านจะสนุกกับการเรียนภาษาอังกฤษจากหน้าเหล่านี่</p>
        <p class="free_content">Please click thumbnails to see videos</p>
        <p class="welcome_vids">
          <span><a id="welcome_vids" href="index.php/sg-video-2"><img src="/templates/beez_20/images/ws_wst2.png" width="160" height="90"></a></span>        
         ....   
        </p>
        <p class="welcome_vids">
          <span><a id="welcome_vids" href="index.php/sg-video-2"><img src="/templates/beez_20/images/ws_wst2.png" width="160" height="90"></a></span>        
         ....
        </p>         
      </div>
   </div>
 </div>

The challenge I'm facing is that there is no footer on the page. Despite setting min-height to 100% as advised online, this has not resolved the issue. I am unsure which div element should be targeted for this adjustment. As mentioned earlier, there is no footer present on the page. Any insights or recommendations would be greatly appreciated.

Answer №1

To ensure your div fits on the screen perfectly, try utilizing the vh unit for height. Simply set it to 100vh and watch it adjust accordingly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving data from an external PHP script

I'm facing an issue with retrieving results from a PHP file after submitting a form: index.php (located at ) <form id='loginForm' action='http://domain1.com/mail.php' method='POST'> <input id=&apo ...

Reduce the file size of CSS and JS files for Magento

We are facing an issue with minifying CSS and Javascript for our Magento website. Currently, the size of our website is 1.1 MB and we aim to reduce it to 1 MB or even lower if possible. I tried using the "CSS Settings" and "Javascript Settings" functions ...

What is the best way to save a current HTML element for later use?

Here is a simple HTML code that I would like to save the entire div with the class test_area and then replicate it when needed. Currently, my goal is to duplicate this div and place the clone underneath the original element. How can I achieve this? Unfortu ...

Empty input fields in Javascript calculations will result in a NaN output

I need to perform a calculation using values entered into form fields and JavaScript. The formula I'll be using is as follows: totalEarnings = income1 + income2 * 0.7 + income3 / 48 + (income4 * 0.7) / 48; The variables income1, income2, income3, an ...

text box with an immobile header

As the browser window size decreases, the layout changes. However, when scrolling down, the search text box moves up and is no longer visible due to its lack of fixation. How can I make the search text box stay fixed as I scroll down? I tried implementing ...

Ways to resize column widths in tree views on Odoo version 10?

I have been struggling to adjust the column width of the columns in my tree view. I have attempted a few different solutions: Trying to change the width attribute in the field tag: width="100px" or width="15%%" Using the style att ...

Incorrect color change on button triggered by onMouse actions and state fluctuations

While creating a user profile on my app, I encountered an issue with button coloring. When I try to add color functionality to the button, it turns red instead of green and remains red even when the mouse is not hovering over it. My goal is to have the but ...

The alert stubbornly refuses to close even when attempting to do so

I am encountering an issue with an alert in my Bootstrap 5 project. The alert does not close when I click on the "X" button. https://i.sstatic.net/pvCdm.png Below is the code snippet: {{#if success}} <div class="container p-4"> ...

What's the reason for the element not inheriting margins from its parent?

I am facing an issue with centering an h1 header within a .banner element. When I try to apply margin to the header, it appears to indent not from the top border of the banner, but rather from the nav element located above the banner. After inspecting the ...

What is the best way to stack several items vertically beside an image?

As a beginner in the world of web development, I recently embarked on my first project. However, I am facing an issue where I cannot align multiple elements under each other next to an image. One element floats at the top beside the image, while the other ...

Is there a way to customize the dot in a JavaFx RadioButton?

Hello fellow coding enthusiasts, I am looking to find out how I can customize the color of a RadioButton dot. I want to have 3 RadioButtons, each with a different color to represent a state. Do I need to use CSS for this task? If so, could someone please ...

Exploring Array Iteration and Incrementing with Easing Techniques

I am currently working on a function that involves iterating over an array and incrementing the values by varying amounts. The challenge is to decrease these incremental amounts as the values in the array get larger. Let's consider the following exam ...

"Maximize user experience: Eliminate the "#" in your URL by utilizing anchor tags for one-page navigation in

I've created a website with menu tabs including Home, About, Work, and Contact. To make navigation easier, I've used anchor tags for this one-page layout. However, I'm concerned about the URLs updating when clicking on the tabs. I prefer to ...

How to Customize the Size and Color of secureTextEntry Inputs in React Native

When it comes to styling a password input like the one below: <TextInput name="Password" type="password" mode="outline" secureTextEntry={true} style={styles.inputStyle} autoCapitalize="none" autoFocus={true} /> I also ap ...

Ways to enhance the legibility and visibility of the text

On my website, there's an image that appears as follows: I attempted to add a shadow to the text, resulting in this look: However, the shadow seems out of place. Any ideas on how I can enhance readability without altering the text color or backgrou ...

What is the reason behind LESS displaying arithmetic operations as text instead of performing them?

Whilst composing the subsequent operations @a: 2px @variable: @a + 5; .margin-style{ margin-left: @variable; } The code above compiles into .margin-style{ margin-left: 2px + 5; } Rather than margin-left:7px; What could be causing this issue? ...

Error Styling: Using CSS to Highlight Invalid Checkboxes within a Group

Is there a way to create a bordered red box around checkboxes that are required but not selected? Here is the code I currently have: <div class="fb-checkbox-group form-group field-checkbox-group-1500575975893"> <label for="checkbox-group-15005 ...

What is the best way to implement a required input field in Vue.js?

I need some assistance with my chat functionality. I want to prevent users from sending empty messages, so I want to make the input field required. Can you please help me with this? I have already tried adding "required='required'" to the input ...

Click the button to save the text to your clipboard with a customized

Can anyone suggest a method for duplicating div text using JavaScript while preserving the style attributes (italics, font family, size, etc.)? My goal is to paste the copied text into Word and have it maintain the same appearance as on the webpage. For e ...

Images that are see-through or translucent

Can someone confirm if Internet Explorer supports transparent PNGs now? How about Chrome? ...