Div height 100% in auto div height?

Question

Div height 100% in auto div height?

Navigation

#1 by (7 votes)

8

I will try to be very explanatory. I have the structure of an ordinary website as you can see in the html below. E I want the height of the sidebar to increase according to the height of the next container. It can also be understood if I say that I need to have the sidebar always reach the maximum height of #wrap , which is with automatic height . I have the following code:

<div id='wrap'>
  <div id='posts'></div>

  <div id='sidebar'>
    <div class='widget'></div>
    <div class='widget'></div>
  </div>
</div>

*{margin:0;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;}
#wrap{width:90%;margin:30px auto;background:#DDD;padding:20px;overflow:hidden;}
#posts{float:left;width:68%;height:2000px;background:#333;}
#sidebar{float:right;width:30%;background:#CD0000;padding:10px;}
#sidebar .widget{width:100%;height:300px;background:#111;margin:0 0 20px;}
#sidebar .widget:last-of-type{margin-bottom:0}

Link: link

I know I could easily solve this by using position:absolute and adding these css commands to their respective classes:

#wrap{position:relative;}
#sidebar{position:absolute;right:0;height:100%}

However, it happens that once the content that is inside the sidebar is larger than the sidebar itself, the content will be cut off. Because the sidebar does not exceed the limits of #wrap , which is where I set position:relative . See: link

Now that everything has been well explained, I briefly need the sidebar to match the height of the next container, but when the content inside the sidebar is larger, it usually redo as if it were using position:static , and so that #wrap does not cut it. Well, anyone who can help me?

javascript html css

asked by anonymous 29.01.2017 / 13:43

1 answer

In a programming language, what differentiates a first-class citizen from the rest? Why iteration of a list with anonymous object works with array but does not work with ListObject?

score 7 · Accepted Answer

See it working here JSFiddle .

Basically, you force the display of the wrap element to be a table ( table ) and that the main divs within it are forced to be similar to the cells of a table ( table-cell ).

#wrap {
    width: 100%;
    display: table;
}

#wrap #sidebar { 
    display: table-cell; 
    width: 25%;
    background: teal;
    min-height: 100%;
}

#wrap #posts { 
    display: table-cell; 
    width: 75%;
    background: orange;
    min-height: 100%;
}