All geek questions in one place

CSS height of 100% makes the height of the element more than 100%

The following HTML is simple and does what I want. The green body reaches down to fill the window.

<body style="margin:0">
    <div style="height:100%;display:flex;flex-direction:column">
        <div style="background:#d0d0ff">
            This is a header
        </div>
        <div style="background:#d0ffd0;flex-grow:1">
            This is the body.
        </div>
    </div>
</body>

But if I replace this body text with some flexible columns, and I give them height:100%because I want them to stretch to the bottom, it newdivactually gets a height exceeding 100% of this container and causes it to scroll. Why is 100% not 100% here?

<body style="margin:0">
    <div style="height:100%;display:flex;flex-direction:column">
        <div style="background:#d0d0ff">
            This is a header
        </div>
        <div style="background:#d0ffd0;flex-grow:1">
            <!-- The new part -->
            <div id='newdiv' style="display:flex;flex-direction:row; height:100%">
                <div style="background:#ffd0d0"> Col 1 </div>
                <div> Col 2 </div>
            </div>
        </div>
    </div>
</body>

enter image description here

+4
source share
4 answers

, , , div col1 col2 height: 100%. .

:

<div id='newdiv' style="display:flex; flex-direction:row; height:100%">
    <div style="background:#ffd0d0"> Col 1 </div>
    <div> Col 2 </div>
</div>

, div : div, .

, , :

100% + (computed height of header div) > viewport height = vertical scrollbar

flexbox . .

, display: flex, , ( ). height , height: 100% flex.

html, body { height: 100%; }
<body style="margin:0">
    <div style="height:100%;display:flex;flex-direction:column">
        <div style="background:#d0d0ff">
            This is a header
        </div>
        <div style="background:#d0ffd0;flex-grow:1; display: flex;"><!--adjustment here-->
            <div id='newdiv' style="display:flex;"><!--adjustment here-->
                <div style="background:#ffd0d0; display: flex;"> Col 1 </div>
                <div> Col 2 </div>
            </div>
        </div>
    </div>
</body>
Hide result

.

  • display: flex
  • height: 100%

+3

. 

<body>
   <header>Header</header>
   <div class="body">
     <aside>abc</aside>
     <div class='inner'>content here</div>
   </div>
</body>

css

html,body{
  height: 100%;
}

body{
  display: flex;
  flex-direction: column;

}


.body{
  flex-grow:1;
  display: flex;
  align-items: stretch;

}

.inner{
  flex-grow: 1;
}

html

0

How about this? - http://codepen.io/arianalynn/pen/WragJP?editors=1010

<style>
 body, html {margin:0;height:100%;width:100%;padding:0}
</style>
<body>
  <div style="height:100%;display:flex;flex-direction:column">
    <div style="background:#d0d0ff">
      This is a header
    </div>
    <div style="background:#d0ffd0;flex-grow:1;display:flex;flex-direction:row; height:100%;-webkit-align-items:stretch">
      <div style="background:#ffd0d0"> Col 1 </div>
      <div style="background:red"> Col 2 </div>
    </div>
  </div>
</body>
0
source

I updated the code if this helps you. set the height 100vh https://jsfiddle.net/ok20071g/1/

0
source

Source: https://habr.com/ru/post/1627624/

More articles:


All Articles