和网络上的几乎每个人一样，我很难让侧边栏达到 100% 的页面填充。
我有一个标题，我想在其下放置一个侧边栏和内容:
---------------------------
- header -
---------------------------
- s - c -
- i - o -
- d - n -
- e - t -
- b - e -
- a - n -
- r - t -
---------------------------
我希望侧边栏的高度为 100%，但我似乎能够让它工作的唯一方法是使侧边栏“位置:固定”。 因为我希望网站能够响应，所以固定不是解决方案。
JSfiddle当前站点的
简短版:
<body>
<header>
<div id="headerBgRight"></div>
</header>
<aside class="left-panel">
<!-- Left panel listing here -->
</aside>
<div class="main-content">
</div>
</body>
CSS:
html, body {
height:100%;
}
header {
position:absolute;
background-image:image.png
width:100%
position:relative;
height:131px;
}
aside {
height:100%;
background-color:rgb(27,135,200);
position: relative;
float:left;
width:100px;
}
main-content {
position:relative;
}
我遇到的问题是侧边栏是100%高度，但因为它设置为相对，侧边栏被添加到131px高度的标题，因此页面的高度为100% + 131 px。这不是我想要的。
有什么方法可以在不创建固定 div 的情况下解决这个问题？
最佳答案
尝试像在 CSS 中那样计算 aside div 的高度:
height: calc(100vh - 131px);
其中 vh 代表屏幕的完整高度，从中减去页眉的高度，即 131px。我认为你会得到你想要的，如果你必须，你可以调整数字以获得 100% 准确的测量。请记住，将来在标题中添加边距/填充可能会把事情搞砸。我建议使用 Sass/Scss 通过如下变量来跟踪您的高度:
$header-height: 131px;
然后像这样在你的造型上使用它:
height: calc(100vh - $header-height);
希望this有帮助!
关于html - 100 % 高度 - 带标题的相对 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33438744/