Div Height

Glenn

Member
I have a div that I have the height set to 100%. It does not fill the container to 100%. What have I done wrong?
 

Glenn

Member
The parent div depends on how much content is has. I just want the child div to fill the height of the parent.
 

chrishirst

Well-Known Member
Staff member
For block level elements, the parent has to have an explicit height set to allow CSS to calculate what the child height should be.
 

Glenn

Member
If I have .elem-a as my parent div that each page has a different amount of content and will be a different height depending on the amount of content. And I have .elem-b as the child div that I set the height:100%; then why does it not fill the parent div 100%. I can understand that if the parent has a padding: 10px; and it not filling that padding, but if the parent div is longer then the height of the monitor then the child div will only reach the height of the monitor.

I have the child div set float:left and at the bottom of the child div, the content in the parent div will justify to the left below the child div.
 

chrishirst

Well-Known Member
Staff member
I have the child div set float:left and at the bottom of the child div, the content in the parent div will justify to the left below the child div.
This a common problem with floated elements known as "float breakout". To prevent it you can either break the float plane by adding an element positioned with float: none; after the floated elements in the parent and before the closing tag of the parent,
for example
Code:
 <br style="float: none;">

or add overflow: hidden; to the parent element style rules, your layout will determine which method is ideal for you.
And it's not 'justify', that is for lines of text within an element, float and justify are entirely different things.
Float is an element positioning property (https://css-tricks.com/almanac/properties/f/float/) while justify is a text alignment property.


If I have .elem-a as my parent div that each page has a different amount of content and will be a different height depending on the amount of content. And I have .elem-b as the child div that I set the height:100%; then why does it not fill the parent div 100%. I can understand that if the parent has a padding: 10px; and it not filling that padding, but if the parent div is longer then the height of the monitor then the child div will only reach the height of the monitor.
No, no the size limit is the browser window NOT the monitor size. even if the browser is 'full screen' the content can only fit between the inside top and bottom edges of the browser window.

If you want an element to fill the entire browser window you have to give both the <html> element and the <body> element an explicit size, usually 100% but if you have problems with 100% always triggering the display of a vertical scrollbar on browsers, use a value between 92% and 99%
for example, in your style sheet add;
CSS:
html, body {
height: 100%;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

Then use a 'wrapper' block level element as the first child of the <body> element also set to 100% height with position: relative; so it becomes the 'parent' for the element flow.

example:
Code:
<html>
         <head>
         </head>
         <body>
                 <div id="wrapper">
                         all content goes here
                 </div>
         </body>
</html>
 

chrishirst

Well-Known Member
Staff member
Something like this?
HTML:
<html>
  <body>
  <div class="d2">
    <a href="alink.com">a</a><br>
    <a href="blink.com">b</a>
  </div>
<div class="d1">
a<br>
  bunch<br>
  of<br>
  content<br>
  goes<br>
  here<br>
  in<br>
  this<br>
  place
 </div>
  </body>
</html>

CSS:
html, body {height:100%;}
a {
  color: yellow;
}
.d1 {
    background-color: orange;
    height: 100%;
}
.d2 {
  background-color: blue;
    border-right: 1px solid #828282;
    width: 150px;
    height: 100%;
    margin-right: 8px;
    padding: 8px;
  float: left;
}

Don't forget to add the wrapper element if you are going to use positioning at all.
 

Kim Kiav

Member
Make sure it is correctly defined and clear. Pay into attention to the parent and child elements. Also is your css file correctly referenced if it is not inline?
 
Top