Set the height of the div to be the full height of the page when designing for responsiveness

For my responsive design, I am looking to have a footer that sticks to the bottom of the page while allowing the content to fill up the remaining space. You can view an example here: http://jsfiddle.net/rzjfhggu/1/

In this example, the header has a fixed height of 70px, but the content and footer are responsive and their heights are unknown. I attempted to make the footer absolute with a bottom value of 0, and the content absolute with top at 70px and bottom at 0. However, on small devices, the footer ends up on top of the content, hiding it.

.wrapper,
.header,
.content,
.footer {
  width: 100%;
}
.header {
  height: 70px;
  background: orange;
}
.footer {
  background: lightblue;
}
.content {
  background: yellow;
}
<div class="wrapper">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    CONTENT
  </div>
  <div class="footer">
    FOOTER
  </div>
</div>

Do you have any other ideas or solutions for this issue? Thank you.

htmlcssresponsive-design

Answer №1

With a plethora of choices available, let's explore one scenario: Assuming that you are the one responsible for determining the dimensions of your footer and header items, implying that you are aware of their sizes.

Here is a slight modification to your HTML:

HTML

.wrapper {
  height: 100%;
  width: 100%;
  position: relative;
}
.header {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
  height: 70px;
}
.footer {
  position: fixed;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  width: 100%;
  height: 70px;
}
.content {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  padding: 70px 0 70px 0;
}
.inner_content {
  position: relative;
  height: 100%;
  width: 100%;
}
<div class="wrapper">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    <div class="inner_content">
      CONTENT
    </div>
  </div>
  <div class="footer">
    FOOTER
  </div>
</div>

The key adjustment is to the top and bottom padding of your content element. The top padding should match your header's height, while the bottom padding should match your footer's height. As long as the sizes are accurately defined, you can now include content in your inner_content that can be scrolled without being hidden by the header or footer.

Answer №2

Check out the code I modified on jsfiddle: http://jsfiddle.net/rzjfhggu/2/

HTML

.wrapper,
.header,
.content,
.footer {
  width: 100%;
}
body {
  margin: 0;
  padding: 0;
}
.header {
  height: 70px;
  background: orange;
  width: 100%;
}
.footer {
  background: lightblue;
  bottom: 0;
  position: fixed;
  height: 30px;
  width: 100%;
}
.content {
  background: yellow;
  position: absolute;
  top: 70px;
  bottom: 30px;
  left: 0;
  right: 0;
}
<div class="wrapper">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    CONTENT
  </div>
  <div class="footer">
    FOOTER
  </div>
</div>

Answer №3

If the size of your footer is unknown, this code snippet will dynamically calculate the footer height and adjust the content height accordingly: 

var windowHeight = $(window).height();
var restHeight = $('.header').height() + $('.footer').height();
$('.content').height(windowHeight - restHeight);
body {
  padding: 0;
  margin: 0;
}

.wrapper,
.header,
.content,
.footer {
  width: 100%;
}

.header {
  height: 70px;
  background: orange;
}

.footer {
  background: lightblue;
  position: fixed;
  bottom: 0;
}

.content {
  background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="header">
    HEADER
  </div>
  <div class="content">
    CONTENT
  </div>
  <div class="footer">
    FOOTER
  </div>
</div>

Answer №4

Using the CSS rule position:fixed
can be beneficial, but if your content is lengthy, it will cause the content to scroll down and display the footer at the end. Take a look at this DEMO for a demonstration.

.content {
    height: 10px
}
.header{
    height: 70px;
    background: orange;
}
.content{
    background: yellow;
    height:100%;
}
.footer {
    background: lightblue;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
}
<div class="wrapper">
    <div class="header">
        HEADER
    </div>
    <div class="content">
        CONTENT
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
        <br/>
        <br/>
        <br/>
        <br/>
        blah
        blah
        blah
       
    </div>
    <div class="footer">
        FOOTER
    </div>
</div>

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

Creating a "briefing" iframe at the top of a webpage

I'm looking for a way to allow users to embed my iframe at a specific size, like 100x100, and then have it resize dynamically to fit the page size when they click on it. I want this functionality to work regardless of how the HTML embedding the iframe ...

javascripthtmliframe

Solving the Django Dilemma: Fixing the "No Reverse Match" Issue

My goal is to create a user-friendly experience where users can click on a product, go to the product page, and add a review directly to that page. The reviews will be displayed as users submit them. I'm not entirely convinced that this is the most ef ...

pythonhtmldjangoweb

Guide on how to vertically and horizontally center a heading text with dash-bootstrap

I have implemented the Bootstrap dash layout for my web application, but I want to place the text in the red area instead of at the top of the page. Can anyone guide me on how to achieve this? https://i.sstatic.net/RcNhy.png I have already tried using "a ...

cssplotly-dashplotly-python

The hover functionality fails to activate when a z-index is applied

My issue revolves around 2 divs: one containing a link and the other a box-shaped container. The link is set with position:fixed; causing it to fly over the container div. To resolve this, I attempted to assign a negative z-index value to the link, but unf ...

javascriptjqueryhtmlcss

Guide to verifying a field's value in a database

My web application requires three inputs from the user: UserName, FirstName, and Email. The goal is to verify if the entered username exists in the database and if so, validate the corresponding Firstname and email. If all three values are correct, a succ ...

phphtmldatabase

Previewing multiple images with multiple file inputs

I am trying to find a way to preview multiple images uploaded from different inputs. When the button is pressed, the content from a textarea containing <img src="$img" id="img1"> is written inside a div called seeimg. The IDs for these images range f ...

javascriptjqueryhtmlcss

Choosing elements in jQuery

Having some trouble with the subnav on my current website project. I think the issue lies in how I am selecting items in my jquery code. It seems like a small fix that needs to be made, but I'm unsure of the correct approach. http://jsfiddle.net/ZDEr ...

javascriptjquerycssjquery-ui-accordion

Activate a specific table by inputting the data from a different table

I am attempting to automate the calculation of a table by inputting values from another table. There are two tables involved; the first one has an input field named profit_rate, and the second one is supposed to calculate cost * currency_rate * profit_rate ...

javascripthtmlajax

Verify the entered information in the input field and showcase it in the display box after pressing the ENTER key

I need to display selected values of a tree structure in a show box on the other side of the page using code. However, I also need to include HTML input boxes in some lines of the tree structure so that users can input data. The challenge is getting the in ...

javascriptjqueryhtmlcss

Retrieve the current width and height of an image after the maximum width and height constraints have been applied

Check out this example The HTML: <div class="container"> <img src="http://placehold.it/500x500" alt="500x500" /> </div> <div class="container"> <img src="http://placehold.it/100x500" alt="100x500" /> </div> < ...

jqueryhtmlcss

Text that must always be centered

I'm having an issue with my match result page layout. The "VS" is not consistently centered and it's causing some weird display problems. How can I ensure that the "VS" is always centered? http://jsfiddle.net/3adhoker/ .result-in-month:nth-ch ...

htmlcss

Using null or undefined for ternary operator formatting in React applications

When styling a component, what should be used if a specific condition is not fulfilled: null, undefined, or something else? For example: errorStyle: { right: locale === Locales.ARABIC ? 0 : null, left: locale !== Locales.ARABIC ? 0 : null, .. ...

javascriptcssreact-native

`json object allows for category selection in options`

Hello (please excuse my English), I have the following script: <script type="text/javascript"> $(document).ready(function() { var idPlato = decodeURI(getUrlVars()["idPl"]); var url = "http://localhost/plato-datos.php?idPla="+idPl ...

javascriptjsonajaxhtmljquery-mobile

Refresh a function following modifications to an array (such as exchanging values)

Looking to re-render a function after swapping array values, but the useEffect hook is not triggering it. I need assistance with this as I plan to integrate this code into my main project. Below are the JSX and CSS files attached. In App.js, I am creating ...

javascriptcssreactjsreact-hooks

I would like the background image to perfectly fit the dimensions of the parent container

https://i.sstatic.net/PlCYU.png Is there a way to prevent the background image from overflowing and causing a horizontal scroll bar to appear? The layout of the page consists of two columns, with each column taking up 50% of the width. The left column con ...

htmlcssbootstrap-5

Having trouble retrieving JSON data from the open weather API

I'm working on a small website to display the weather of a specific city using an API. However, I am facing an issue where I can't seem to display the temperature from the response. Below are snippets of my JavaScript and HTML files: var ap ...

javascripthtmljsonapi

Using Vue to iterate through a list with conditional logic is as intuitive

I am completely new to vue, and facing a challenge with a conditional situation that I usually handle with PHP. My goal is to iterate through an element with a condition inside it. Below is how I envision the structure: <ul> <li>A</li&g ...

phphtmlvue.jsvuejs2

Troubleshooting compatibility problems between jQuery UI Sortable and a responsive Bootstrap 5 page

Has anyone had experience using the jQuery UI Sortable widget on a Bootstrap 5 responsive page? My page consists of <div class="col-lg-6"> elements, displaying two per row. Although the sorting functionality works, I've encountered t ...

csstwitter-bootstrapjquery-uibootstrap-5jquery-ui-sortable

Styling your Vuetify V-data-table with CSS

Struggling to add extra spacing between table rows, despite inspecting the page and verifying that my styles are not being overridden. Have read other Vuetify posts on applying CSS but still no luck. Any suggestions for why I can't style my table as d ...

cssvue.jsvuetify.js

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and a ...

javascriptcssangularjs