Div Height

Discussion in 'Web Design' started by Glenn, Jun 7, 2018.

to remove all ads.
  1. Glenn

    Glenn Member

    Messages:
    202
    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?
     
  2. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    Not a clue.

    You need to tell us ALL of the other dimensions for the parent AND child elements, along with the display mode for the elements PLUS inherited characteristics for the cascade down to the child element.

    Read this as well. https://www.w3schools.com/css/css_boxmodel.asp
     
  3. Glenn

    Glenn Member

    Messages:
    202
    The parent div depends on how much content is has. I just want the child div to fill the height of the parent.
     
  4. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    For block level elements, the parent has to have an explicit height set to allow CSS to calculate what the child height should be.
     
  5. Glenn

    Glenn Member

    Messages:
    202
    So, it would be better to use a table.
     
  6. Glenn

    Glenn Member

    Messages:
    202
    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.
     
  7. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    No idea, it depends on what you are trying to achieve.
     
  8. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    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.


    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;
    Code:
    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>
     
  9. Glenn

    Glenn Member

    Messages:
    202
  10. chrishirst

    chrishirst Well-Known Member Staff Member

    Messages:
    2,670
    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>
    
    Code:
    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.
     
  11. qba82

    qba82 New Member

    Messages:
    7
    Or just use min-height
     
  12. Kim Kiav

    Kim Kiav Member

    Messages:
    41
    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?
     

Share This Page