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: 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.

htmlcss

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

The website's navigation system effectively directs content within the initial 100% viewport

I have encountered a slight issue. I created a Sidebar Navigation with some added "hey's" to demonstrate the problem: * { margin: 0; padding: 0; font-family: 'Roboto', sans-serif; } nav { height: 100vh; width: 250px; borde ...

htmlcss

Content in a div with a transparency level set at 50%

Within a div container, I currently have text displayed. The challenge that I'm facing is that the container itself has an opacity of 0.5, and I would like the text to be fully visible with an opacity of 1. Unfortunately, due to the constraints of th ...

csshtmlopacity

Column that adjusts to different screen sizes

In the realm of responsive web design, what methods are suggested to achieve the specified CSS display? My main requirement is to have a maximum of three columns. The content should be divided evenly among these three columns. I prefer using SCSS and wel ...

htmlcss

Issue encountered while presenting canvas on HTML due to Firebase information

Even though I believe I'm following the correct steps, I am facing an issue where the graph displaying real-time database values is not showing up. The first image shows my real-time database and a demostration as shown in images 2 and 3. While the da ...

javascripthtmlfirebasefirebase-realtime-databasecanvasjs

AngularJS table with resizable columns for seamless data browsing

Most examples of expandable tables using ng-repeat feature a separate content for the expanded row, like an independent table inside the detail row. I have implemented many expandable tables using these methods, similar to the following: <tr ng-repeat ...

htmlangularjsangularjs-ng-repeat

Here, it is possible for the padding-right value to be equal to zero

I am relatively new to CSS and I am currently in the process of testing and experimenting to better understand how it works. For instance, in the code snippet provided, we see that the selector .box h3 has a padding: 6px 10px 4px 10px;. Therefore, the pad ...

css

Is there a way to automatically scroll 50 pixels down the page after pressing a button?

Is there a way to make my page scroll down in Angular when a button is clicked? I attempted to use this code, but it didn't have the desired effect. What is the best method for scrolling the page down by 50px? window.scrollBy(0, 50); ...

htmlangulartypescriptscroll

Error in Typescript: Function not being triggered on button click

As someone who is just starting out with typescript, I've been tackling a simple code that should display an alert message in the browser when a button is clicked. I've experimented with the button and input tags, as well as using both onclick ev ...

javascripthtmltypescript

Tips for altering the browser tab color on a PC or Mac with HTML or JavaScript

While I am aware of the method to change theme colors on mobile devices using <meta name="theme-color" content=" #0000ffbb" />, I prefer browsing on my laptop. Are there ways to customize browser tab appearance using HTML or JS fo ...

javascripthtmlbrowser

Modify a specific field in a row of the table and save the updated value in a MySQL database

I have successfully retrieved data from a database and displayed it in a table. Now, my goal is to enable editing of a specific field within a row and save the updated value back into MySQL. Here is the code snippet that includes displaying the data in th ...

phpjqueryhtmlmysqli

Determine the total by multiplying the value of a dropdown menu and a text input field using jQuery when the values are changed

I am new to jQuery and JavaScript. I have a textbox and a select box, and when I enter a value in the textbox and select a value from the select box, I want to display the multiplication of both values in another textbox. I have tried doing this with two t ...

javascriptjqueryhtml

Is it possible to continuously refresh a DIV element?

After spending the past 4 or 5 hours scouring Stack and various other resources, I am still unable to find a solution to my problem. The issue at hand involves an Iframe within a page that displays 5 lines of information fetched from a database. This info ...

javascriptphpjqueryhtmlpage-refresh

Backstretch malfunctioning

Looking to enhance my webpage with a backstretch image slideshow effect using the body background, but encountering issues. The code I have included before the </head> tag is: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery ...

javascriptjqueryhtml

Retrieve the element located within a "block" element that is relative to the user's click event, without the

I'm pondering whether it's feasible, but here's my concept: Within my page, there are multiple identical blocks with the same classes, differing only in content. I am unable or unwilling to assign IDs because these blocks are dynamically g ...

javascripthtml

Issue with jQuery fadeTo() not working after appendTo() function completes

I am facing a problem with the code below that is meant to create a carousel effect for my website. The main issue I am encountering is that the original fadeTo() function does not actually fade the elements, but rather waits for the fade time to finish an ...

javascriptjqueryhtmlcss

Unable to add the div using a jQuery click event

Hey there, I'm looking to add a div dynamically when clicking on another div. Check out the code snippet below: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <title></title> <script src= ...

javascriptjqueryhtml

Give GetElementsByClassName a shot

Hey, have you tried using js ref_doc_getelementsbyClassName? "I keep getting the error message 'Uncaught TypeError: Cannot set property 'value' of null' " Check out this HTML code snippet: <input type="text" cla ...

javascripthtmljqueryclassname

Click here to access the identical page

Longtime follower of stackoverflow but only my second time posting a question. Here is the code I am currently working on: echo "<td><a href = 'http://localhost/map/index.php' value='$id' >Delete</a></td>"; ...

phphtml

Exploring how CSS affects backgrounds in the Google Chrome browser

Having an issue with the background on my website. In Firefox and other browsers, the background appears much lighter and whiter compared to Chrome. This is the CSS code for my background: body {background:#ffffff url(../../images/background.jpg); direct ...

htmlcssgoogle-chromecolors

Tips for designing a tilted CSS layout from scratch

I am looking to design a stylish interface using HTML & CSS. Here is the style I want to achieve: Currently, my interface looks like this: Although these are just reference images, you can see that my design does not have the same sleekness as the one in ...

cssskew