HTML/CSS全高度侧边栏

我发现了很多关于围绕这个问题的互联网充斥的讨论和问题，但是，他们都不符合我的情况和解决方案具有高度特异性有一定的局面。HTML/CSS全高度侧边栏

我有在页面顶部的100px一个高度header元素。我有一个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; 
}

来源

2011-08-03 Steven Zezulak

你能发布你的html和css吗？在此期间，你可以看看这里：http://www.tutwow.com/htmlcss/quick-tip-css-100-height/ – mamoo

你确定一切都在树（儿童）的正确位置？即头是身体的孩子？ –

@mamoo - 编辑过的HTML/CSS文章。 –

您正在寻找的臭名昭著的 “人造栏” 技术。这里是a tutorial。

基本上，你不能用一个简单的背景颜色做到这一点，你必须使用一个重复的背景图片。

来源

2011-08-03 07:53:56 Iterate

我曾希望避免这种情况;最近我一直在寻找更简约和无图像的模板。 –

对不起。尽我所能，最好的，我搜索了高低，没有别的办法。我还没有尝试过，但也许尝试通过定位这是相同的背景颜色，并包含一个不间断的空间（' '），看看是否可行，试着把一个div附在列的底部。让我们知道如果它。 – Iterate

没有使用JS，没有其他“干净”的方式（我看到其他技术真的污染标记，并使用大量的黑客跨浏览器兼容性，所以在我看来，他们不是很好的解决方案）... – mamoo

-3

jQuery的优雅处理这个轻松，所以我不知道为什么你不会想用js。大多数编码超过两个站点的开发人员花费了相当多的时间寻找魔术答案，因为我已经有了，而且没有什么比使用js更有效。

来源

2011-08-03 09:08:47

正如我在上面的评论中提到的，我最近对JavaScript和图像免费简约模板感兴趣。使用JavaScript/jQuery肯定没有错;这只是我对“魔术答案”的追求:) –

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

来源

2011-08-03 09:27:00

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

你可以通过这个jQuery代码来实现。调用主要内容高度。

来源

2012-10-29 10:10:27

$（“。left-sidebar，.right-sidebar”）。height（Math.max（$（“。content”）。height（）））; 您可以混合两个边栏 –

不知道，如果你想这一点，或者它是否会为你的工作（我新的编码），但尝试浮动离开你的侧边栏，浮动内容的权利，无论是文本左对齐，并使用百分比宽度。

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

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

如果您有任何其他的设置，您将有不同的方法处理这些但这可能会奏效。

来源

2013-05-10 17:58:51 Jeff

我发现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的边缘不是！）。

来源

2013-11-18 06:44:50

错误的链接。你可以用正确的替换它还是删除它？ – vastlysuperiorman

从互联网存档https://web.archive.org/web/20150227203316/http://offshootinc.com/blog/2011/11/23/getting-100-column-height-with-css/ - 希望这会生存一段时间... –

HTML/CSS全高度侧边栏

回答

相关问题