Issue with child div not properly fitting inside parent div

Question

Issue with child div not properly fitting inside parent div

I am working with three different divs in my code.

There is one parent div and two child divs.

The styling for the parent div looks like this:

#parent {
  overflow:auto;
  margin: 0 auto;
  margin-top:37px;
  min-height: 100%;
  width:875px;
}

Now, let's take a look at the styles for the two child divs:

#child1 {
  overflow:auto;
  min-height:150px;
  border-bottom:1px solid #bbb;
  background-color:#eee;
  opacity:0.4;
}

#child2 {
  height:100%;
  background-color:white;
}

While the parent div extends to fill 100% of the page height, I've noticed that child2 does not extend all the way down to the bottom of the page like the parent div does.

css html

Answer 1

Answer №1

When it comes to setting the height of an element, things may not work as you expect. The percentage specified in height: 100% is calculated by referencing the first parent element with a defined height and either absolute or relative positioning.

There's a workaround for the body tag where some browsers may behave as desired when setting its height to 100% of the page. However, this method may not work if you nest elements deeper within the structure.

If you want to stretch a div to the bottom of the page using absolute positioning without the need for JavaScript, here's an approach that is quite cross-browser compliant:

<div id="parent">
   <div id="childNorm"></div>
   <div id="childStrech"></div>
</div>

#parent
  {
      position: absolute;
      width: 1000px;
      bottom: 0;
      top: 0;
      margin: auto;
      background-color: black;
  }

  #childNorm
  {
     position: absolute;
     width: 1000px;
     top: 0;
     height: 50px;
     background-color: blue;
     color: white;
  }

  #childStrech
  {
     position: absolute;
     width: 1000px;
     top: 50px;
     bottom: 0;
     background-color: red;
     color: white;
  }

To see a demonstration, check out this Jsfiddle link: http://jsfiddle.net/t7ZpX/

The key trick here is using absolute positioning and adding bottom: 0; to make the element stretch to the bottom of the page. Just be mindful of how you position the elements accordingly.

Answer 2

When it comes to setting the height of an element, things may not work as you expect. The percentage specified in height: 100% is calculated by referencing the first parent element with a defined height and either absolute or relative positioning.

There's a workaround for the body tag where some browsers may behave as desired when setting its height to 100% of the page. However, this method may not work if you nest elements deeper within the structure.

If you want to stretch a div to the bottom of the page using absolute positioning without the need for JavaScript, here's an approach that is quite cross-browser compliant:

<div id="parent">
   <div id="childNorm"></div>
   <div id="childStrech"></div>
</div>

#parent
  {
      position: absolute;
      width: 1000px;
      bottom: 0;
      top: 0;
      margin: auto;
      background-color: black;
  }

  #childNorm
  {
     position: absolute;
     width: 1000px;
     top: 0;
     height: 50px;
     background-color: blue;
     color: white;
  }

  #childStrech
  {
     position: absolute;
     width: 1000px;
     top: 50px;
     bottom: 0;
     background-color: red;
     color: white;
  }

To see a demonstration, check out this Jsfiddle link: http://jsfiddle.net/t7ZpX/

The key trick here is using absolute positioning and adding bottom: 0; to make the element stretch to the bottom of the page. Just be mindful of how you position the elements accordingly.

Answer 3

Answer №2

Indeed, one of the frustrating quirks in CSS is how min-height is not treated as actual "height" when calculating other styles. Check out this example at http://jsfiddle.net/3raLu/3/. To make a child element full height, you may need to apply height: 100% to its parent div. Alternatively, if it can be absolutely positioned, another solution is shown here: http://jsfiddle.net/3raLu/6/.

Answer 4

Indeed, one of the frustrating quirks in CSS is how min-height is not treated as actual "height" when calculating other styles. Check out this example at http://jsfiddle.net/3raLu/3/. To make a child element full height, you may need to apply height: 100% to its parent div. Alternatively, if it can be absolutely positioned, another solution is shown here: http://jsfiddle.net/3raLu/6/.

Issue with child div not properly fitting inside parent div

Answer №1

Answer №2

Similar questions

You are unable to move the image to the top of the screen after zooming it with CSS

What is the best way to update the image card in bootstrap?

The JQuery loading symbol does not prevent keyboard interactions

When using Angular JS, you can easily display a message and refresh the page with just one click

JQuery Powered Text Analyzer

What is the reason for index.html requesting the css or js modules as if they were directories when loading?

Retrieving checkbox values from a MySQL database in HTML/PHP

Vertically align the left div in the center, while maintaining the standard alignment of the right div

Developing a webpage linked to a multimedia library

Troubleshooting Image Map Failure on Internet Explorer 10

Guide on how to incorporate an external javascript file into an HTML button

Angular Floating Panels: A Guide to Creating Dynamic User Interfaces

"Efficiently setting up individual select functions for each option in a UI select menu

What could be causing the whitespace around this element when using SASS from Refills / Bourbon.io?

No mouse cursor activity while in Pointer Lock mode

Is there a way to navigate to a specific <li> element using scrolling?

I am encountering an issue where I am unable to access properties of null while trying to read the 'pulsate' function within the

Allow all images on the webpage to be easily dragged and dropped into a designated upload section

Styling definition lists and background containers with CSS

Verify the validity of a form using JavaScript and by utilizing HTML5 validation, then proceed to save the form data in local storage