Setting the height of a div to 100% does not seem to function properly when the body has a minimum height

I recently came across an unexpected behavior in my coding. I had set the min-height of the body to be equal to the height of the viewport (100vh). Inside the body, there was a div element with the class of "container" that I wanted to take up the entire height of the body (100%), ensuring it extended to at least the full height of the viewport. However, this did not happen as expected. The only way to achieve the desired result was to also set the height of both the html and body to 100%. What could be the technical reason behind this issue? Shouldn't the div naturally inherit the (min-)height of its parent?

You can view a codepen example with the expected behavior commented out in the CSS section.

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ddd;
  min-height: 100vh;
}

.container {
  background: #aaa;
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100%;
  height: 100%;
}

/* Uncomment for the expected behaviour */
/*
html,
body {
  height: 100%
}
*/
<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

Answer №1

The solution is quite straightforward - the percentage value for min-height is determined by the height of the parent container, not the min-height.

* {margin:0;}

body {
  background: gray;
  height: 100vh; /* pay attention here */
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: 100%;  /* check this out */
}
<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

However, if you use min-height:inherit, it will inherit the min-height value from the parent container.

* {margin:0;}

body {
  background: gray;
  min-height: 100vh; /* take a look here */
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: inherit;  /* examine this */
}
<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

If the container always needs to cover the viewport height, I would recommend setting min-height:100% directly on .container.

* {margin:0;}

body {
  background: gray;
}

.container {
  background: silver;
  margin: 0 20px;
  min-height: 100vh; /* see this */
}
<div class="container">
  <h1>Some generic title</h1>
  <p>Some random paragraph</p>
</div>

Answer №2

This technique always works wonders for me. The concept here is to set the minimum height as 100vh or 100% if the content exceeds that limit.

body {
  background: lightgray;
  height: max-content; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  background: gainsboro;
  margin: 0 20px;
  flex-grow: 1;
}

Answer №3

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ddd;
  min-height: 100vh;
  height: 100vh;
}

.container {
  background: #aaa;
  max-width: 500px;
  margin: 0 auto;
  padding: 1rem;
  min-height: 100%;
  height: 100%;
}

/* Uncomment this section for desired outcome */
/*
html,
body {
  height: 100%
}
*/
  <div class="container">
    <h1>An Example Header</h1>
    <p>Some arbitrary text</p>
  </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

The correct terminology for divs, spans, paragraphs, images, anchor tags, table rows, table data, unordered lists, list

Just wondering, I've noticed that every time I come across a page element '<###>[content]<###>' and want to learn how to manipulate it, I usually search for something like "how to do x with div" or "how to get y from div". I know ...

Aligning items in a parent div to ensure that one element takes up the remaining space

I'm facing an issue with a container div called .audiojs that has a width of 100%. Inside this container, there are multiple elements with fixed widths and one element with a dynamic width (.scrubber with a width of 30%). The problem arises when I try ...

Easily adjust the width of divs within a parent container using CSS for a seamless and uniform

I am designing a webpage where I have set the container width to 100% to cover the entire screen width. Inside this container, I have multiple DIVs arranged in a grid structure with a float: left property and no fixed width, just a margin of 10px. Is ther ...

Tips for resolving issues with custom radio buttons in web forms

When using custom CSS codes for radio buttons, everything works fine with regular HTML codes. However, when trying to use asp:RadioButton, an additional tag is rendered in the label which causes the CSS code to not work as expected. Any suggestions on how ...

Creating a JavaScript function to display an object on top of a background image

I am in the process of designing a program that mimics Guitar Hero, where red circles appear over an image of a violin when specific key presses are detected. However, I am encountering difficulties with making the circles appear on top of the image even ...

AngularJS event that is triggered once all scopes have been applied

In my AngularJS application, I am retrieving data from a REST service. Occasionally, the brackets {{}} used to access values from scope are initially rendered and then replaced by the actual values later on. My goal is to add an ng-switch to the main DIV o ...

Validating the similarity of classes with JQuery

Currently, I am working on creating a quiz game using HTML, CSS, JQuery, and potentially JavaScript. I am looking to implement an if statement to check if a dropped element is placed in the correct div (city). My approach involves utilizing classes to comp ...

Customize Background Colors for Individual Cells in Bootstrap Vue b-table Component

My display of items is done using bootstrap vue b-table: <b-table striped bordered :tbody-tr-class="row_class" :fields="fields" :items="items" head-variant="light" class="o-list" thead-class="o- ...

Issues with authenticating PHP password against MYSQL

I've hit a roadblock while working on my project, and I believe it's a simple fix. However, I just can't seem to figure it out. If you want to see the issue for yourself, check out the live site at www.thriftstoresa.com. The problem lies wi ...

image background not appearing in HTML, CSS, and JavaScript game

When working on a simple HTML, CSS, and JavaScript game, I decided to make a change in the CSS code. Instead of setting the background color to green as before, I opted to use an image with the following line: background-image: url(flappybird.png); I also ...

Preventing text from being obscured by images in flexbox using DIV elements

Check out my layout and CSS code: body { font-family: Helvetica, sans-serif; background-color: #B2BEB5; } b { font-family: Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { font-family: Helvetica, sans-serif; } } .flex-container { font-family: Ar ...

Slanted lower edge - entire width

Can anyone provide guidance on how to design a div that is 100% width and 300px wide, with a slightly angled bottom border that spans the entire width of the box? https://i.sstatic.net/QSvoQ.png I am open to using either CSS or JavaScript for this task, ...

Troubleshoot: The Toggle Icon on Bootstrap 4 Navbar is Not Functioning

I am experiencing an issue with my HTML file. When I decrease the size of the browser, the hamburger menu appears but nothing happens when I click on it. <nav class="navbar navbar-expand-lg navbar-light"> <a href="/" ...

Modifying the HTML file won't be immediately visible in browsers

I encountered a frustrating issue while working on my website. Despite making changes to the code, the browsers are not reflecting the updates. This problem is occurring in Internet Explorer, Google Chrome, and Firefox. Initially, I had a div with a link ...

HTML/CSS Selecting Tables: First, Last, and More

Is there a way to combine selector tags in order to style the first <td> inside the first <tr>? I have attempted various methods to merge these selectors, albeit unsuccessfully. I am simply seeking guidance on whether or not this is even possi ...

What is the correct way to superimpose an image with a transparent background?

I am currently working on a mini game that involves overlaying images on camera views. The goal is to have the gun displayed without the background rectangle, as shown in this image: https://i.stack.imgur.com/yU4A2.jpg The code snippet below is relevant ...

The Chrome 53 browser is currently experiencing issues with recognizing keyboard events

Utilizing the keyboard event for my dropdown control in angularjs with the following code. It worked flawlessly in chrome 49, but unfortunately, it doesn't seem to be functioning in chrome 53. I am unsure whether this issue lies within chrome 53 or if ...

Issue with Bootstrap CSS: some elements are not properly contained within the body tag

After integrating Bootstrap Sass into a Rails project, I embarked on revamping its homepage. However, I encountered an issue with the background style applied to the <body> element - it only affected the portion of the page visible upon initial loadi ...

Strange Behavior of an Image in the Center

I've utilized CSS to center my image. .center-block{ margin-left:auto; margin-right:auto; } When I apply this code, it centers the images in a strange way. Here is my HTML & CSS code . You can see the image below to understand what the issue is ...

Custom Homepage with Integrated Google Web Search and Autocomplete Feature

Is there a way to incorporate the standard Google web search with autocomplete into my own webpage, without using a custom search engine like www.google.com? I have been unable to find any examples or guides on how to accomplish this. All the resources see ...