Question

所以，我有一个侧边栏，我想要一直向下扩展到我的页面（完全就内容而言）。我将侧边栏的height设置为100%，但不幸的是，它只能到内容div的中间位置。我在StackOverflow上研究了我的问题并找到了几个答案，几乎所有答案都有答案，比如做

html, body{ height: 100%; }

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

如何解决问题并使侧边栏的height成为页面的完整height？（我更喜欢纯HTML / CSS，但是如果你有一个合适的JS答案请提供它。任何有用的东西。）提前致谢！

Answer 1

我猜这两个人认为是height:100%。首先，它将高度设置为父元素的100％高度。因为您的body html元素与屏幕高度一样高，所以高度保持为屏幕高度。

您可以通过设置@ Julo0sS建议的position:fixed或计算javascript中的高度并更新样式属性来修复它。但我会说设置position:fixed更容易和充分。

Answer 2

这就是你要做的事情：

CSS：

if(!empty($response->myinterests)){
        foreach ($response->myinterests as $key => $value) {
    foreach($value as $val)
    {
    $inter[$key][].= $val;
    }
}
        }

HTML：

#leftbar{
text-shadow: 1px 1px 10px gray;
position: absolute;
top: 100px;
left: 100px;
max-width: 195px;
background-color: yellow;
color: black; 
height:1100px (or 166%);
border-radius: 25px;
}

根据px设置高度。

Answer 3

您可以使用display: flex达到所需的效果。默认情况下，flexbox设置它的子节点以填充其高度，这恰好是最高的子节点（如果在Flex容器上没有设置高度，当然）。它有相当不错的support和很多很好的教程。我发现自己经常使用Chris Coyiers css-tricks snippit on flexbox。有两种方法可以复制你的小提琴。将body设置为display: flex并使用填充将#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>

希望这有帮助！

Answer 4

这是桌子的时间！如果您不想专门定义高度，并且您希望多个孩子具有相同的高度，那么您需要的是一张桌子。看看这个：

＆＃13;

#wrapper{
  display:table;
  position: absolute;
  top: 100px;
  left: 100px;
}
#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; 
}

＆＃13;

<table id="wrapper">
  <td id="leftbar">
    <h2>Site Navigation</h2>	
  </td>   
  <td 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>
  </td>
</table>

＆＃13;

当然这会改变您的标记，但如果您想要一个纯CSS解决方案，那么表就是答案。

哦，值得指出的是，我在这里采取了一些偷偷摸摸的快捷方式。如果您检查元素，则会注意到您的网络浏览器已为我们添加了<tbody>和<tr>元素。唯一的问题是内容元素不再是#wrapper的直接子元素。这只是一个小问题，如果你想让包装的孩子得到#leftbar和#content，有很多解决方法。

尽管我增加了高度，为什么我的div不会扩展到页面的整个长度：100％？

4 个答案: