我遇到了以下代码问题。尽管我指定了 height: 100vh
,但是 body
元素的高度等于 100vh + header
元素的高度。我该如何解决这个问题?
body {
height: 100vh; /* It should never be necessary to scroll the whole page. */
margin: 0; /* Nothing should get added to the 100vh. */
}
header {
background-color: orange;
}
main {
display: flex;
height: 100%; /* Occupy all space that is not occupied by the header. */
}
.column-1 {
background-color: yellow;
width: 25%;
overflow-y: scroll; /* The only place where there should be a scrollbar. */
}
.column-2 {
background-color: red; /* Is not actually visible. */
width: 75%;
}
.column-2 div {
background-color: green;
width: 100%; /* Occupy all space that is available for column-2. */
height: 100%; /* Same. */
}
<header>
Header - Its height depends on the available width.
There is a lot of stuff in here like foo foo foo foo foo foo foo foo...
</header>
<main>
<div class="column-1">
<ul>
<!-- This list may or may not cause scrolling. -->
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
<li>li</li>
</ul>
</div>
<div class="column-2">
<div>
Content
</div>
</div>
</main>