javascript - 尽管我添加了高度 : 100%?，为什么我的 div 没有扩展到页面的全长

Question

所以，我有一个侧边栏，我想一直向下延伸到我的页面(一直延伸到内容)。我将侧边栏的 height 设置为 100%，但不幸的是它只达到内容 div 的中间位置。我已经在 StackOverflow 上研究了我的问题并找到了几个答案，几乎所有答案都有这样的答案

html, body{ 高度: 100%; }

然后将侧边栏的高度也设置为100%。没有一个解决方案对我有用，所以我觉得这是代码的实际问题。 <强> Here is what I currently have.

如何解决这个问题并使侧边栏的高度成为页面的完整高度？ (我更喜欢纯 HTML/CSS，但如果您有合适的 JS 答案，请提供。任何有用的东西。)提前致谢!

Answer 1

您可以使用display: flex 实现您想要的效果。默认情况下，flexbox 设置它的 child 来填充它的高度，这恰好是最高的 child 是什么(当然，如果没有在 flex 容器上设置高度)。它有相当不错的support和很多好的教程。我发现自己在使用 Chris Coyiers css-tricks snippit on flexbox相当频繁。有两种方法可以复制你的 fiddle 。将 body 设置为 display: flex 并使用 padding 将 #leftbar 和 #content 放在你想要的位置，或者您可以将它们放置在带有 display: flex 的包装器中，然后绝对定位。我选择了后一种方法。这是代码:

#leftbar{
text-shadow: 1px 1px 10px gray;
max-width: 195px;
background-color: yellow;
color: black; 
border-radius: 25px;
}
#content{
    border-radius: 25px; 
    background-color: red; 
}

#wrapper {
  display: flex;
  position: absolute;
top: 100px;
left: 100px;
}

<div id="wrapper">
  <div id="leftbar">
    <h2>Site Navigation</h2>
  </div>
  <div id="content">
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
    <p>Bla bla bla bla bla</p>
  </div>
</div>

希望这对您有所帮助!