Determine the body's height by adding the heights of the header and footer

In my design, there is a header with a height of 8rem;

.header {
    top: 0;
    left: 0;
    height: 8rem;
}

Following that, there is a footer with a height of 5rem;

footer
{
    width:100%; 
    height: 5rem;    
}

I am attempting to calculate the height of the body content so that it fills 100% of the screen's height. Initially, I tried this:

.body-content{
  height: calc(100vh - 8rem - 5rem);
}

However, this calculation did not result in the desired outcome and the height extended beyond the screen. After some experimenting, I found that the following solution worked perfectly:

.body-content{
  height: calc(100vh - 15.5rem);
}

But shouldn't it be equal to 100% of the screen's height minus the header's height and footer's height?

css

Answer №1

It's difficult to diagnose the issues with your layout based on the information provided, but it seems like you're attempting to create a webpage with a top header that is 8rem in height, a bottom footer that is 5rem in height, and content in between that fills the remaining space in the viewport.

May I suggest an alternative approach using the CSS property display: flex?

Try running the code snippet below:

html, body {
  height: 100%;
  margin: 0;
}

body {
  /* Utilizing flexbox */
  display: flex;
  flex-direction: column;
  margin: 0;
}

.header {
  /* Fixed height, no shrinking */
  height: 8rem;
  flex-shrink: 0;
  
  background: #f5f5f5;
  margin: 0;
}

.footer {
  /* Fixed height, no shrinking */
  height: 5rem;
  flex-shrink: 0;
  
  background: #f5f5f5;
  margin: 0;
}

.body-content {
  /* Variable height, scroll if needed */
  flex: 1;
  overflow: auto;
  
  background: #e5e5e5;
  margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Layout Example</title>
</head>
<body>
  <header class="header">Header</header>
  <main class="body-content">Content</main>
  <footer class="footer">Footer</footer>
</body>

Flexbox is a contemporary solution for designing layouts. For more information, check out this guide: https://css-tricks.com/snippets/css/a-guide-to-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

Refreshing a specific div within an HTML page

I am facing an issue with the navigation on my website. Currently, I have a div on the left side of the page containing a nav bar. However, when a user clicks a link in the nav bar, only the content on the right side of the page changes. Is there a way t ...

javascriptjqueryhtmlcss

jQuery - encountering issues setting CSS properties within an AJAX callback function

I'm struggling with a jquery ajax callback function to change the background color of a table cell. Despite no errors in Firebug, my code isn't working as expected. Here's the code I have: $(".tariffdate").click(function () { var proper ...

cssjquerycallbackbackground-color

Managing images in JavaScript while conserving memory

Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...

javascriptjqueryhtmlcssoptimization

Obtain a masterpiece by creating a canvas in React

Greetings! I have developed a drawing app using react and I am looking for a way to capture what the user has drawn on the canvas when they release the mouse button. This process should repeat continuously until the user stops drawing. Can anyone suggest h ...

javascriptcssreactjscanvas

Emulate the CSS hover effect with jQuery 코드 희미한

Is there a method in jquery or any other technology that can detect event X and trigger a different event elsewhere? Currently, I am working with an image that has an image map. When a user hovers over a specific area on the map, I would like another part ...

javascriptjquerycsshover

What could be causing my website to have a horizontal scroll even when the width is set to 100%?

My website seems to be scrolling horizontally, possibly due to an issue with the footer. I suspect it might be related to the social media icons in the footer, but I'm not entirely sure. Any guidance on resolving this problem would be greatly apprecia ...

htmlcss

CSS :contains selector after adding a script through Ajax append operation

Is there a way to change the text color in $('td:contains("text")').css('color','red') after an Ajax load script? Here is the main code snippet <div id="datatable"></div> <script src="https://code.jquery.com/j ...

javascriptjquerycss

Make sure all of the inner tags are properly contained within their respective containers

In my explanatory bubble, I aim to include text within the explain-header div as a container for my explanations: /*Explain Bubble*/ .explain-container { position: relative; overflow: hidden; max-width: 70vw; max-height: 50vh; background-c ...

javascripthtmlcss

Modify animation trigger when mouse hovers over

I am looking to create a feature where a slide overlay appears from the bottom of a thumbnail when the user hovers over it, and retracts when the user is not hovering. animations: [ trigger('overlaySlide', [ state(&ap ...

htmlcssangulartypescript

Compass - substitute a single value for an alternate attribute

Can I utilize a value from one class to customize another? Consider the following class: .sourceClass { color: red; } And now, let's say we have this class: .destinationClass { border-color: ###needs to match the color in .sourceClass => re ...

csssasscompass

Is setting the height to 100% a dependable option for container loading during the initial page rendering in CSS?

Upon arrival on the page, I envision the container containing the "search" to expand and occupy the entire screen. Seems simple enough: just set the height to 100%. If the user chooses to scroll down, they will see the rest of the content. It almost fee ...

htmlcssheight

Tips on automatically adjusting the width of a div to fit the content, maintaining center alignment, and ensuring the contents float to the left

I am facing an issue with a div element that has multiple children. My goal is to have the children neatly fit to the bottom left of the grid when the window expands, utilizing the next available space efficiently. However, as the div expands with the wind ...

javascripthtmlcss

Struggling with the alignment of divs in a vertical manner

Looking for a way to align multiple divs inside another div vertically with even spacing between them? They should all start at the top. Currently, my solution has the child-divs positioned at the top-left corner of the parent div (see the first picture): ...

htmlcssreactjs

Use selenium to locate an element based on its CSS selector

Looking to extract user information from each block using the following code snippet: driver.get("https://www.facebook.com/public/karim-pathan") wait = WebDriverWait(driver, 10) li_link = [] for s in driver.find_elements_by_class_name('clear ...

pythoncssseleniumselenium-webdriverweb-scraping

The Scrapy CSS selector is not fetching any prices from the list

Having trouble with the price CSS-selector while scraping an interactive website using Scrapy. Check out the HTML screenshot I captured: https://i.stack.imgur.com/oxULz.png Here are a few selectors that I've already experimented with: price = respon ...

pythoncssweb-scrapingscrapycss-selectors

Animate.css does not function properly when loaded locally

I'm currently using a Flask server to host an HTML file for testing purposes. Within the head of this HTML file, I have linked to a locally stored animate.min.css file (<link rel="stylesheet" type="text/css" href="{{ url_fo ...

javascripthtmljquerycssanimate.css

CSS styling: Adjusting button placement to appear to the right of an HTML table

I've encountered a challenge with an HTML table that has dynamically generated columns through Ajax calls and jQuery, resulting in a variable table width. My aim is to include buttons at the top and bottom of the table that are aligned to the right b ...

htmlcss

Can CSS `content` support the combination of different font styles?

I have set up a CSS element to insert some content. Here's the code: .foo:after { content: "Bold, italics"; } What I want is for the word "Bold" to appear in bold font-weight and the word "italics" to appear in an italic font-style. I know that ad ...

htmlcsscss-content

Align the content vertically in a Bootstrap column that takes up the full height

Is there a way to make sure that the columns in a row are the full height of the row while keeping the text content vertically centered? <div class="row fixed-bottom mobile-navbar align-items-center"> <router-link to="/" cl ...

cssbootstrap-4flexboxvertical-alignment

Issues persisting with the fixed header functionality in Bootstrap table

I implemented a table using bootstrap-table in my project. Everything seems to be working fine except for the scroll bar within the tbody. For some reason, the scroll bar is not appearing. Can anyone point out what I might be missing? I believe that if th ...

csstwitter-bootstrapbootstrap-table