The content division is stretching too far in height at 100%

I'm struggling with ensuring that my content container div extends to the bottom of the page properly, even when the content itself is short and does not fill the entire page. The issue is that the container continues past the bottom of the page in such cases.

Here's the current structure:

<div id="container">
    <div id="logo"></div>
    <div class="clear"></div>

    <div class="spacer"></div>
    
    <div class="content">
        <div class="post">
            <div class="right"></div>
        </div>
        <div id="centerit">/div>  
    </div>
</body></html>

And here's the associated CSS:


body{
    background:url(bg.jpg);
    font-family:verdana, helvetica, sans-serif;
    font-size:12px;
    line-height:18px;
    color:#b3b3b3;
    height:100%;
    min-height:100%;
}

a {
    color:#fff;
    text-decoration:none;
    font-weight:bold;
    outline:none;
}

/* Additional CSS styles... */

Answer №1

Make sure to make the following adjustments and additions:

html { height: 100%; min-height: 100; /* use min-height for Firefox compatibility */ }
#content { height: -webkit-calc-height(100% - 37px); } /* Remember to include all necessary vendor prefixes and adjust the value of 37px according to the actual height of elements above #content */

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

Enhance the CSS Transition for a Seamless Bootstrap Toggle Menu Experience

I attempted to modify the Bootstrap Toggle Menu slide effect from top to bottom to left to right. You can view the website here: After experimenting with various CSS codes (I prefer using pure CSS for this effect), I finally discovered this one: .collaps ...

Transferring an image file from PHP to JavaScript

I have encountered an issue with transferring images stored as LONGBLOB files in my database to a JS file for dimension comparison with the screen. Here is how I retrieve the images: function fillArrays(){ $idArray = array(); $sql = "SELECT oglas_id,s ...

PHP code snippets do not interfere with one another's styles

header.php: <div class="purple-box"> <!-- Header content --> </div> <style> .purple-box { /* Styles for purple box in the header */ } </style> footer.php: <div class="purple-box"> <!-- Foo ...

Display the output returned from the AJAX request (HTML and/or JavaScript)

How can I effectively render content from an ajax call when the response may include html and/or javascript? I used to rely on document.write() for synchronous calls, but now that I need to use asynchronous calls, I have to find a different approach to dis ...

CSS: Indication that the Text is Extending Beyond its Container

Seeking a solution to indicate overflow of text within its container, as demonstrated in this example. Essentially, a <span> with fixed dimensions. Looking for a visual cue when text exceeds boundaries. Attempted the use of text-overflow:ellipsis;, ...

I am looking to remove all white spaces from my website's HTML code

I am looking to remove all white spaces from my website in html. The more I align my text to the right, the more whitespace it creates on the right side of the page. As seen in the images, there are a lot of whitespaces and I suspect that elements are caus ...

PHP generated timetable displaying improperly formatted HTML cells

Having some trouble with my HTML table for a school timetable. This is what I want: Required Timetable. But instead, I'm getting something like this: Incorrect Timetable Here's the code snippet: // days of week array $days = array( 1 => &ap ...

Ensure that the content on iOS does not scroll beyond the boundaries (similar to how it works on Android

My fixed position container on iOS allows for scrolling past the content to reveal the container beneath, unlike on Android. Is it possible to make iOS behave like Android in this regard? When viewing my content on iOS, I can scroll to see the yellow cont ...

Optimizing page load by only loading the javascript file once during a refresh using native methods

Is there a method to ensure that a javascript file is loaded only once when refreshing an HTML file (which contains a reference to this javascript file)? For example: <script src="js/myscript.js" type="text/javascript"></script> I wish there ...

Issue with dragging and styling windows in Safari on iOS

When checking my website on Safari using an iPad or iPhone, I noticed that I can touch and drag left to right, causing the entire window to move and reveal the grey background behind it. Here is a link to my page. However, when visiting other websites, no ...

Conceal content upon initial page load, then unveil after a set period of time

Is there a way to hide a paragraph on page load and reveal it after a certain amount of time has passed? I assume JavaScript will be needed, but I'm not sure where to begin. Any suggestions? ...

Python Web Scraping Automation Tool - Inconsistent Encountering of 511 Error Code

My latest project involves opening Firefox with Selenium, extracting HAR files using BrowserMobProxy, and accessing JSON data from those files at timed intervals. Occasionally, however, I encounter a 511 Error: <!DOCTYPE html><html><head> ...

net::ERR-CHUNKED-ENCODING-MALFORMED

I have encountered a very peculiar issue that seems to only occur on specific PCs when trying to request URLs from any page on my web application. Here is the error message that pops up: net::ERR-INVALID-CHUNKED-ENCODING This error doesn't happen ...

Tips for retrieving the current value of an input using AJAX

Currently, I am in the process of developing an e-commerce website using Laravel. One issue I am facing is capturing the new value of an input when it changes. This input is located on the cart page where users have the option to adjust the quantity of a p ...

Ionic - Ensuring that various components occupy the entire vertical space of a parent <div> with a height of 100

Currently, I am developing an app using Ionic. My goal is to position four row elements and a button inside a div. The div occupies the entire screen with a height of `100%`, and the content within it should expand to match this full-height requirement. D ...

How can I position divs in a way that the top right corner of the child div touches the bottom left corner

I am currently working on implementing a message box feature on my website. When a user clicks on the inbox icon, I want a messages box to appear, similar to how stackoverflow handles it. Stackoverflow achieves this by placing a div outside the ordered lis ...

Incorporate adjustable div heights for dynamically toggling classes on various DOM elements

One of the challenges in developing a chat widget is creating an editable div for users to input text. In order to maintain the design integrity, the box needs to be fixed to the bottom. An essential requirement is to have javascript detect resizing as us ...

Single page design - images extend beyond boundaries on mobile-friendly versions

I'm encountering an issue with the top section of my one-page website. While it looks great on desktop, on other devices, the three main photographs in the section stack on top of each other instead of expanding to fit the screen properly. The images ...

Is the content within the div longer than the actual div itself when the width is set to 100%?

When working with a div of fixed width that contains only an input text box, and the width of the input is set to 100%, you may notice that it extends slightly beyond the boundaries of the div. For demonstration purposes, consider the following code: HTM ...

How can I troubleshoot the unresponsive remove div function on my website?

My code is running fine on CodePen (link provided below), but for some reason, it's not working properly in the web browser. I am executing the code from localhost and the button isn't responding as expected. CODE Here is my Visual Studio code ...