What methods can be used to ensure a div reaches all the way down to a sticky footer?

I'm currently working on a layout with a sticky footer, and I have a specific div that needs to extend all the way down to the footer. However, simply setting the height to 100% doesn't achieve the desired result. I've also experimented with using a display table in the CSS, but that hasn't solved the issue either.

For reference, you can view the layout here: http://jsfiddle.net/NDk5f/2/

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en"><head>
  <meta charset="utf-8">
  <link href="css/test.css" rel="stylesheet">
</head>
<body>

<div class="navbar">
Navbar
</div>


<div id="wrap">
  <div class="container fill">
    <div class="page-header">
      <h1>Sticky footer</h1>
    </div>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p>
  </div>
  <div id="push"></div>
</div>


<div id="footer">
  Footer
</div>


</body>
</html>

CSS:

*{
    margin: 0;
}

html,
body {
  height: 100%;
}
#wrap {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -50px;
}
#push,
#footer {
  height: 50px;
}
#footer {
  background-color: #f5f5f5;
}

/* Use class .fill to stretch div to page bottom */
.fill{
    height:100%;
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: red;
    padding-top:75px;
}
  .fill .row {
      height: 100%;
      display: table-row;
  }


.container
 {
  width: 940px;
}

.container {
  margin-right: auto;
  margin-left: auto;
}

.container:before,
.container:after {
  display: table;
  line-height: 0;
  content: "";
}

.container:after {
  clear: both;
}

.navbar {
  position: relative;
  z-index: 2;
  margin-bottom: 20px;
  overflow: visible;
  background-color: orange;
}

Answer №1

If you want to achieve fixed percentage heights on elements while using the box-sizing: border-box property, it's best to set fixed heights on the footer/nav and dynamic heights on the content. This can be a bit tricky to accomplish.

One method I commonly use is creating a wrapper with the position: absolute property that is positioned just below the header and just above the footer. Inside this wrapper, there is another div for the content which has a height of 100%

Another approach:

<nav>nav</nav>
<div id="wrap">
    <div class="content">content</div>    
</div>
<footer>footer</footer>

html,body { margin: 0 }
nav, footer { height: 20px; background: blue }
footer { position: absolute; bottom: 0; width: 100% }
#wrap { background: gray; position: absolute; bottom: 20px; top: 20px; right: 100px; left: 100px }
#wrap .content { height: 100% }

The wrapper will ensure that the content maintains a fixed height even when the window is resized.

Check out this Fiddle for reference.

As browsers continue to adopt CSS3 features, achieving this layout will become even easier with flexbox.

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 Android WebView is unable to run JavaScript code in a local HTML file

Currently, I am attempting to load a local HTML file from the assets folder into a webview. Even though I can successfully load the HTML file in the webview, there seems to be an issue with the file's reliance on an external .js file for calculations. ...

What steps can I take to ensure that it is responsive?

I recently purchased this template and am currently editing it. It utilizes bootstrap, however, I seem to be encountering an issue with the sizing of an image on different monitors. I attempted to add: .responsive {width: auto; height: auto;} to resolve ...

How to make the parent div adjust its height to fit the children [CSS]

I am facing an issue with my parent div's height when adding more children. Despite setting the height of the parent to auto or not specifying a height at all, it ends up with a random height that does not seem to match the sum of its children. Even i ...

Angular 2 Date Input failing to bind to date input value

Having an issue with setting up a form as the Date input in my HTML is not binding to the object's date value, even though I am using [(ngModel)] Here is the HTML code snippet: <input type='date' #myDate [(ngModel)]='demoUser.date& ...

Opening multiple dialogs in Jquery Dialog box

I have several images displayed on a single page. When each image is clicked, I want a dialog box to open. I currently have 6 instances of this setup in my HTML. However, when I click on an image, all 6 dialogs pop up with the same information as the first ...

Is there a way to fill the remaining height of the parent with the middle item when sandwiched between two others using CSS?

I am facing a design challenge with a parent container that has 3 children arranged vertically. The top and bottom children are wide (600x200), while the middle child is tall (200x600). The parent container itself is much smaller (100x200) as I want to ens ...

Dynamic table that collapses/expands in Python's Flask framework

I am currently working on developing a table in Flask with collapsible rows. I have encountered an issue where, while hardcoding values works perfectly, populating the table using a loop with data from a Python dictionary results in only the first child of ...

Show a specific form field based on the chosen option in a dropdown menu using Angular and TypeScript

I am looking to dynamically display a form field based on the selected value from a dropdown list. For instance, if 'first' is chosen in the dropdown list, I want the form to remain unchanged. However, if 'two' is selected in the drop ...

what is the best way to position a glyphicon next to a form?

Forgive me for asking such a basic question, but I struggle with aligning and positioning elements. Here is my issue: https://i.sstatic.net/Uy6XB.jpg https://i.sstatic.net/TTs6V.jpg All I want is for the glyphicon to be displayed next to the textfield, ...

When the HTML and PHP code keeps running, the JavaScript text on the page updates itself

I was experimenting with threading in different languages like Java, PHP, and JavaScript. I am aware that JavaScript is single-threaded and PHP lacks robust threading capabilities. Below is the code snippet I have been working on: <body> <p id= ...

Unable to automate the selection of a dropdown menu using Selenium WebDriver

I am currently utilizing http://www.makemytrip.com/ This is the HTML code. <div class="mrgnBot30 clearFix"> <span class="watch_icn flL"></span> <div class="widget_inner clearFix suggest_me padBot15 flL"> <h3 class="clearFix has ...

Developing a jQuery Plugin to Generate an Interactive Dropdown Menu

I have a task to dynamically create a select list in which users can add options after the select list has been created. Check out my code snippet below: <script type="text/html" id="select_field"> <div class='row& ...

Angular Material: Enhanced search input with a universal clear button

After searching for a cross-browser search control with a clear button similar to HTML5, I found the solution rendered by Chrome: <input type="search> The code that gave me the most relevant results can be found here. I used the standard sample w ...

The MVC 5 view is unable to display an HTML image when adding it within an appended div

Currently, I am working with ASP.net MVC5 at a novice level. I'm faced with the challenge of creating a div that displays an image using a JavaScript function. Here is the code snippet I have: function showLoadingImage() { $('#submit_Em ...

Tell me about the CSS ruby-align characteristic

While browsing online, I stumbled upon a reference to the ruby-align property that piqued my interest. After searching on w3schools for some examples, I was surprised to find no mention of it anywhere. I remembered that Ruby is a newer tag in HTML5 and de ...

CSS creates captivating image hover transitions with span elements

<a href=""><img src=""><span>content</span></a> When I hover over the image, the content within the span appears using relative positioning with display set to none and absolute positioning in the span tag. My query is regard ...

Saving data values for utilization in jQuery

Recently, I've come across a series of links structured like this: <a class="colorBox" href="#" title="#0676B3"></a> <a ... <a ... these links all have color values in the title attribute <a ... What I'm trying to do is uti ...

Incorporating the chosen value from a dropdown box as a variable in PHP

Seeking assistance with using the value selected in a drop-down box as a PHP variable in my functions.php file. I attempted to utilize jquery-ajax for this purpose. $(document).ready(function(){ $("#pa_color").change(function(){ var result= $(this).val( ...

"Enhanced visuals with parallax scrolling feature implemented on various sections for an engaging

With 4 sections, each featuring a background image and text in the middle, I encountered an issue when attempting to have them fixed while scrolling. The goal was for the section below the first one to overlap the one above it along with its text as we scr ...

The alignment for Bootstrap's NAV element within a display:table-cell element seems to be off when viewed on Firefox浪

Here is an example of HTML markup with Bootstrap library included: <div class="container"> <div class="card"> <ul class="nav list"> <li class="element"> <a href="#">Element</a> </li> ...