Question

我发现互联网上有很多关于这个问题的讨论和问题，但是，它们似乎都不符合我的情况，解决方案对某种情况非常具体。

我在页面顶部有一个header元素，其高度为100px。我有一个div#sidebar元素，其左侧宽度为250px，最后一个div#main元素也向左浮动。

html，body和div#sidebar的高度为100%。

我的目标是让div#sidebar一直延伸到页面底部，无论浏览器大小或内容大小如何。显然，如果内容长于可查看的页面高度，它应该正常运行并超出页面的末尾，引入滚动条。

然而，就目前而言，似乎页面高度已经计算为100% + 100px，引入了滚动条，即使没有内容可以推动div#sidebar。到目前为止，我发现没有可行的解决方案，或者我可能错过了它或搞砸了解决方案;无论如何，我已经待了一个多小时，而且我要撕掉我的头发。

是否有一种非JavaScript方法可以让它正常工作以阻止将header的高度添加到100%？

这是我的HTML / CSS - 虽然我在上面列出了所有相关细节，但这应该会有所帮助。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Awesome Template!</title>
        <link href="./stylesheet.css" rel="stylesheet" />
    </head>
    <body>
        <header id="primary">
            <h1>My Awesome Template!</h1>
        </header>
        <div id="sidebar">
            <h1>Sidebar</h1>
        </div>
        <div id="main">
            <h1>Main</h1>
        </div>
    </body>
</html>

CSS：

html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

body
{
    background: #fff;
    font: 14px/1.333 sans-serif;
    color: #080000;
}

header#primary
{
    width: 100%;
    height: 100px;
    background: #313131;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));
    background-image: -moz-linear-gradient(#4d4d4d, #313131);
    background-image: -o-linear-gradient(#4d4d4d, #313131);
    background-image: linear-gradient(#4d4d4d, #313131);
}
header#primary h1
{
    margin: 0px 0px 0px 20px;
    padding: 0px;
    line-height: 100px;
    color: #ffffff;
}

#sidebar
{
    float: left;
    width: 250px;
    background: #ccc;
    min-height: 100%;
}

#main
{
    float: left;
}

Answer 1

我发现this article中概述的方法是解决问题的一种非常简单的方法。

你需要用另一个div包围你的#sidebar和#main div，这样你的html代码就变成了：

...
<div id="content">
    <div id="sidebar">
        <h1>Sidebar</h1>
    </div>
    <div id="main">
        <h1>Main</h1>
    </div>
</div>
...

然后以下css会做一些接近你想要的事情：

#content {
    position: relative;
    width: 100%;
}
#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
}
#main {
    position: relative;
    margin-left: 250px;
}

（稍微调整一下，例如我发现#main中h1的边距似乎被忽略了......但是#sidebar上h1的边距不是！）。

Answer 2

你正在寻找臭名昭着的“人造柱”技术。这是a tutorial。

基本上，你不能用简单的背景颜色来做，你必须使用重复的背景图像。

Answer 3

如果您不关心较低的IE，请在父级上使用display: table，在元素上使用display: table-cell。这应该将他们的高度固定在一起。至于差距，请使用margin-top: -100 px; padding-top: 100px;

Answer 4

不确定你是否尝试过这种方法，或者它是否适用于你（我是编码新手），但请尝试向左浮动侧边栏，向右浮动内容，向左对齐文本，并使用百分比表示宽度。

#sidebar
    {
float: left;
width: 25%;
background: #ccc;
min-height: 100%;
text-align: left;
    }

#main
    {
float: right;
text-align: left;
width: 70%;
    }

如果您有任何其他设置，则必须采用不同的设置，但这可能会有效。

Answer 5

$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));

你可以通过这个jquery代码来做到这一点。调用主要内容高度。

Answer 6

jQuery优雅地处理这个问题，所以我不确定你为什么不想使用js。大多数编写了超过几个站点的开发人员都花了相当多的时间来寻找神奇的答案，就像我一样，并没有比使用js更好的了。

HTML / CSS全高侧边栏

6 个答案: