"Height: 100%" does not occupy all height

Question

"Height: 100%" does not occupy all height

Asked 9 years, 2 months ago

Viewed 21,716 times

3

There is no way the side in red is 100% so both have the same size, how to solve?

<div>
    <div style="
    min-width: 180px;
    width: 20%;
    height: 100%;
    background-color: red;
    float: left;
    ">dsdsd</div>
    <div style="   background:blue;float:left; width: 30%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut neque eleifend, euismod neque vel, posuere elit. Aenean pellentesque dui ut euismod lobortis. Nam sed bibendum purus, et gravida diam. Cras aliquam efficitur venenatis. Suspendisse pellentesque sapien eget odio tempor dictum. Cras facilisis, est sit amet ultrices varius, tortor lorem egestas nulla, id tempor dui nisl sed urna. Etiam convallis lacus sit amet mattis congue. Quisque consequat magna eu est fringilla, eget vulputate quam vehicula. Duis a velit porttitor, lobortis ligula eu, interdum quam. Proin ut nisi accumsan, consectetur odio sit amet, pharetra augue. Duis porta efficitur metus vel aliquam. Cras commodo, tortor a tempus convallis, tellus ante rutrum tortor, eget facilisis lorem tortor at nunc.

Curabitur non nibh nec lorem suscipit placerat. Sed leo urna, consectetur vitae nisi in, tincidunt commodo dolor. Aenean vitae tincidunt tellus. Curabitur molestie facilisis auctor. In bibendum libero at tincidunt lobortis. Quisque tristique vestibulum tellus, quis porta eros. Sed eu ex velit. Ut a tincidunt mauris.

Cras nec nibh sed arcu aliquet euismod. Mauris ut risus a magna bibendum luctus. Aenean sit amet maximus ipsum, at efficitur arcu. Proin urna metus, sagittis non luctus quis, tempor ullamcorper augue. Fusce luctus ligula quis lacus sollicitudin placerat. Integer rutrum scelerisque ante, ut cursus quam pharetra id. Morbi porttitor sit amet lacus at blandit. Etiam suscipit aliquam fermentum. Cras a ex et dui dapibus malesuada. Donec ac arcu at risus faucibus hendrerit at sit amet felis.

Donec hendrerit nibh mauris, at mollis ipsum pulvinar eget. Maecenas non purus velit. Quisque sagittis mauris id lorem tempor, quis egestas sem commodo. Nunc pellentesque, ex nec venenatis molestie, lacus enim gravida lorem, a dictum quam dui sed magna. Sed sodales neque id facilisis aliquet. In hac habitasse platea dictumst. Duis fringilla ut enim vitae aliquet. Nulla aliquet, ligula eu convallis ullamcorper, ex metus facilisis massa, ut placerat turpis justo eu ex. Vivamus metus ante, posuere at sem ut, dictum accumsan nulla. Donec a tempor justo.

Etiam eu neque vel metus faucibus dapibus. Maecenas efficitur erat sapien. Aenean semper, ex a imperdiet accumsan, erat est vulputate leo, et condimentum lectus justo sed felis. Sed viverra massa metus, ut convallis libero aliquam in. Sed placerat sem non ex vulputate sagittis. Sed in est nec dolor suscipit tempor. Duis sit amet mauris erat. Donec tristique pharetra egestas. Praesent ultricies vehicula pellentesque. Nam efficitur venenatis nisi, nec mollis turpis faucibus ut. Phasellus at blandit dui.

Nulla facilisi. Suspendisse nec ipsum eu libero euismod viverra. Mauris commodo magna tellus, ut interdum tortor pretium eu. Proin pellentesque tellus quis tempor mollis. Donec imperdiet dignissim malesuada. Fusce vel mauris lacus. Curabitur ut tellus hendrerit, ullamcorper augue ut, feugiat erat. Mauris ut quam risus. Vivamus sit amet mauris vel ante rhoncus rhoncus sed quis sem. Proin congue dui a lacus congue, id vulputate lectus vulputate. Phasellus erat urna, porta suscipit nibh vitae, sollicitudin mollis eros. Suspendisse potenti. Maecenas pulvinar elementum augue et sollicitudin. Etiam tempor, magna sit amet cursus tempus, elit nulla dignissim eros, nec feugiat mauris magna et leo. Vivamus eu tellus id mi interdum iaculis vitae sed mi.

Nulla convallis ullamcorper erat bibendum semper. Ut vulputate dolor in euismod auctor. Suspendisse potenti. Nulla rhoncus malesuada felis non cursus. Nunc ac eros lacinia, euismod est nec, pellentesque nunc. Suspendisse quis efficitur leo, nec efficitur orci. Maecenas malesuada interdum vulputate. Aenean eget sagittis orci, porttitor consectetur est. Sed et gravida felis, eget volutpat nisl. Sed eu mattis metus. Sed id enim a mi tempor tincidunt in a orci. Integer mi mauris, tempus at laoreet venenatis, facilisis et lorem.

Etiam imperdiet risus eget risus vestibulum ornare. Proin feugiat eget ex sit amet tempor. Maecenas faucibus, urna nec tincidunt cursus, elit tellus dignissim diam, vitae aliquet magna risus in libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras dictum ipsum id ex hendrerit, pharetra hendrerit sapien commodo. Donec sagittis, eros id eleifend suscipit, sapien sapien scelerisque lacus, non commodo elit tortor at nibh. Cras tincidunt iaculis hendrerit. Aliquam erat volutpat. Integer molestie fermentum tempor.

Aenean tempus vulputate tortor, a condimentum ipsum fringilla vel. Aenean rutrum neque nec rhoncus interdum. Integer sit amet orci sed massa venenatis suscipit ac ac metus. Vivamus ac condimentum quam. Vivamus dapibus tempus turpis ac porta. Integer nec ipsum fringilla, iaculis orci quis, pharetra tortor. In sagittis viverra sodales. Curabitur eget dui tristique, porttitor odio at, faucibus dui. Sed nec auctor nibh. Maecenas tincidunt orci eget diam varius, a maximus lorem pellentesque.

Quisque vitae mi risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus et pharetra nisi, nec dapibus nibh. Aenean accumsan vitae augue vel pretium. Ut convallis dictum euismod. Donec in tempor urna. Quisque auctor quam non nulla iaculis pulvinar. Vivamus vel massa a ante sollicitudin scelerisque. Nam consectetur erat nec enim vestibulum faucibus. Maecenas vitae neque non arcu aliquam facilisis. Curabitur ultrices aliquet neque vitae ullamcorper. Aenean vel scelerisque risus. Nulla porttitor consequat ante, ut gravida orci posuere ac. Proin id odio eu neque facilisis porttitor vehicula eu orci. Quisque aliquam ullamcorper diam id aliquet. Integer dignissim auctor tempus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut neque eleifend, euismod neque vel, posuere elit. Aenean pellentesque dui ut euismod lobortis. Nam sed bibendum purus, et gravida diam. Cras aliquam efficitur venenatis. Suspendisse pellentesque sapien eget odio tempor dictum. Cras facilisis, est sit amet ultrices varius, tortor lorem egestas nulla, id tempor dui nisl sed urna. Etiam convallis lacus sit amet mattis congue. Quisque consequat magna eu est fringilla, eget vulputate quam vehicula. Duis a velit porttitor, lobortis ligula eu, interdum quam. Proin ut nisi accumsan, consectetur odio sit amet, pharetra augue. Duis porta efficitur metus vel aliquam. Cras commodo, tortor a tempus convallis, tellus ante rutrum tortor, eget facilisis lorem tortor at nunc.

Curabitur non nibh nec lorem suscipit placerat. Sed leo urna, consectetur vitae nisi in, tincidunt commodo dolor. Aenean vitae tincidunt tellus. Curabitur molestie facilisis auctor. In bibendum libero at tincidunt lobortis. Quisque tristique vestibulum tellus, quis porta eros. Sed eu ex velit. Ut a tincidunt mauris.

Cras nec nibh sed arcu aliquet euismod. Mauris ut risus a magna bibendum luctus. Aenean sit amet maximus ipsum, at efficitur arcu. Proin urna metus, sagittis non luctus quis, tempor ullamcorper augue. Fusce luctus ligula quis lacus sollicitudin placerat. Integer rutrum scelerisque ante, ut cursus quam pharetra id. Morbi porttitor sit amet lacus at blandit. Etiam suscipit aliquam fermentum. Cras a ex et dui dapibus malesuada. Donec ac arcu at risus faucibus hendrerit at sit amet felis.

Donec hendrerit nibh mauris, at mollis ipsum pulvinar eget. Maecenas non purus velit. Quisque sagittis mauris id lorem tempor, quis egestas sem commodo. Nunc pellentesque, ex nec venenatis molestie, lacus enim gravida lorem, a dictum quam dui sed magna. Sed sodales neque id facilisis aliquet. In hac habitasse platea dictumst. Duis fringilla ut enim vitae aliquet. Nulla aliquet, ligula eu convallis ullamcorper, ex metus facilisis massa, ut placerat turpis justo eu ex. Vivamus metus ante, posuere at sem ut, dictum accumsan nulla. Donec a tempor justo.

Etiam eu neque vel metus faucibus dapibus. Maecenas efficitur erat sapien. Aenean semper, ex a imperdiet accumsan, erat est vulputate leo, et condimentum lectus justo sed felis. Sed viverra massa metus, ut convallis libero aliquam in. Sed placerat sem non ex vulputate sagittis. Sed in est nec dolor suscipit tempor. Duis sit amet mauris erat. Donec tristique pharetra egestas. Praesent ultricies vehicula pellentesque. Nam efficitur venenatis nisi, nec mollis turpis faucibus ut. Phasellus at blandit dui.

Nulla facilisi. Suspendisse nec ipsum eu libero euismod viverra. Mauris commodo magna tellus, ut interdum tortor pretium eu. Proin pellentesque tellus quis tempor mollis. Donec imperdiet dignissim malesuada. Fusce vel mauris lacus. Curabitur ut tellus hendrerit, ullamcorper augue ut, feugiat erat. Mauris ut quam risus. Vivamus sit amet mauris vel ante rhoncus rhoncus sed quis sem. Proin congue dui a lacus congue, id vulputate lectus vulputate. Phasellus erat urna, porta suscipit nibh vitae, sollicitudin mollis eros. Suspendisse potenti. Maecenas pulvinar elementum augue et sollicitudin. Etiam tempor, magna sit amet cursus tempus, elit nulla dignissim eros, nec feugiat mauris magna et leo. Vivamus eu tellus id mi interdum iaculis vitae sed mi.

Nulla convallis ullamcorper erat bibendum semper. Ut vulputate dolor in euismod auctor. Suspendisse potenti. Nulla rhoncus malesuada felis non cursus. Nunc ac eros lacinia, euismod est nec, pellentesque nunc. Suspendisse quis efficitur leo, nec efficitur orci. Maecenas malesuada interdum vulputate. Aenean eget sagittis orci, porttitor consectetur est. Sed et gravida felis, eget volutpat nisl. Sed eu mattis metus. Sed id enim a mi tempor tincidunt in a orci. Integer mi mauris, tempus at laoreet venenatis, facilisis et lorem.

Etiam imperdiet risus eget risus vestibulum ornare. Proin feugiat eget ex sit amet tempor. Maecenas faucibus, urna nec tincidunt cursus, elit tellus dignissim diam, vitae aliquet magna risus in libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras dictum ipsum id ex hendrerit, pharetra hendrerit sapien commodo. Donec sagittis, eros id eleifend suscipit, sapien sapien scelerisque lacus, non commodo elit tortor at nibh. Cras tincidunt iaculis hendrerit. Aliquam erat volutpat. Integer molestie fermentum tempor.

Aenean tempus vulputate tortor, a condimentum ipsum fringilla vel. Aenean rutrum neque nec rhoncus interdum. Integer sit amet orci sed massa venenatis suscipit ac ac metus. Vivamus ac condimentum quam. Vivamus dapibus tempus turpis ac porta. Integer nec ipsum fringilla, iaculis orci quis, pharetra tortor. In sagittis viverra sodales. Curabitur eget dui tristique, porttitor odio at, faucibus dui. Sed nec auctor nibh. Maecenas tincidunt orci eget diam varius, a maximus lorem pellentesque.

Quisque vitae mi risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus et pharetra nisi, nec dapibus nibh. Aenean accumsan vitae augue vel pretium. Ut convallis dictum euismod. Donec in tempor urna. Quisque auctor quam non nulla iaculis pulvinar. Vivamus vel massa a ante sollicitudin scelerisque. Nam consectetur erat nec enim vestibulum faucibus. Maecenas vitae neque non arcu aliquam facilisis. Curabitur ultrices aliquet neque vitae ullamcorper. Aenean vel scelerisque risus. Nulla porttitor consequat ante, ut gravida orci posuere ac. Proin id odio eu neque facilisis porttitor vehicula eu orci. Quisque aliquam ullamcorper diam id aliquet. Integer dignissim auctor tempus.</div>
</div>

Jsfiddle

4 answers

6

So you can use the height:100% it is necessary to define position:absolute for them. But when using this property the elements are positioned based on a parent element that has position:absolute,position:relative or position:fixed.

Therefore, see the example with a solution:

* {
  padding: 0px;
  margin: 0px;
}
#barras {
  height: 300px;
  position: relative;
  width: 100%;
  background: #ccc;
}
#barra1 {
  width: 200px;
  height: 100%;
  position: absolute;
  overflow: auto;
  background-color: red;
  top: 0;
}
#barra2 {
  width: 200px;
  float: right;
  height: 100%;
  overflow: auto;
  position: absolute;
  background-color: blue;
  top: 0;
  left: 200px;
}

<div id="barras">

  <div id="barra1">
    texto texto texto texto texto
  </div>

  <div id="barra2">
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
  </div>

</div>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.

by Munir Baarini • **673** points · Answer 1 · 2015-09-09T18:17:07+00:00

To determine 100% height for elements using css, it is necessary that the 100% value for the "height" property of the "body" and "html" tags is inserted in the stylesheet, in this way:

html,body{
 height:100%;
}
/*A div abaixo ocupara 100% da altura do "container" onde foi inserida*/
div{
 height:100%;
 width:50%;
 background:orange;
}

by Rodrigo A. Santos • **189** points · Answer 2 · 2017-07-02T23:57:27+00:00

Use the new CSS measure vh (probably View Height). I’m wearing it like this with flex box:

#div-corpo{
    height:100vh;
    display: flex;
    flex-direction: column;
}

#div-height-100%{
    flex-grow: 1;
}

This ensures that if you have an element below, it also appears, everything inside this div, accepted height: 100%.

Remember to put one min-height for version mobile!

by Carlos • **1,622** points · Answer 3 · 2015-09-06T15:48:12+00:00

height 100% does not work on that side because the height of the box containing it has no defined value.

Assuming that the part in blue always has more text than the red one, one solution would be to put the blue one inside the red one, thus:

*{
  padding: 0px;
  margin: 0px;
}
#barra1{
  width: 400px;
  overflow: auto;
  background-color: red;
}
#barra2{
  width: 200px;
  float: right;
  background-color: blue;
}

<div id="barra1">
  texto texto texto texto texto 
  <div id="barra2">
    texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto 
  </div>
</div>