HTML / CSS全高度边栏 [英] HTML/CSS full height sidebar
问题描述
我发现很多关于这个问题在互联网上讨论和问题，但是，没有一个似乎匹配我的情况，解决方案是高度特定的某种情况。
我在页面顶部有一个头元素，高度 100px 。我有一个 div＃sidebar 元素向左浮动宽度 250px ，最后一个 c c $ c> body 和 div＃sidebar 是 100％。
我的目标是让 div＃sidebar 无论浏览器大小如何都能一直延伸到页面底部，内容大小。显然，如果内容长度超过可见的页面高度，它应该正常工作，并推动页面结束，引入滚动条。
但是， ，似乎页面高度已计算为 100％+ 100px ，即使没有内容会推动 div＃sidebar down。到目前为止，我没有找到任何解决方案的工作，或者也许我错过了或弄乱了解决方案;不管怎样，我已经在这一段时间了一个多小时，我即将撕裂我的头发。
有一个非JavaScript的方法来获得这个正确地停止标题的高度被添加到 100％？
这是我的HTML / CSS - 虽然我包括上面的所有相关细节，这应该有帮助。
<！DOCTYPE html>
< html lang =en>
< head>
< meta charset =utf-8/>
< title>我的真棒模板！< / title>
< link href =。/ stylesheet.css =stylesheet/>
< / head>
< body>
< header id =primary>
< h1>我的真棒模板！< / h1>
< / header>
< div id =sidebar>
< h1>侧栏< / h1>
< / div>
< div id =main>
< h1>主< / h1>
< / div>
< / body>
< / html>
CSS：
code> 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;
}
臭名昭着的人造柱技术。这里是教程。
基本上，你不能使用简单的背景颜色，你必须使用重复的背景图片。
I've found a lot of discussions and questions littered around the internet pertaining to this question, however, none of them seem to match my case and solutions are highly specific to a certain situation.
I have a header element with a height of 100px at the top of the page. I have a div#sidebar element floated left with a width of 250px, and finally a div#main element also floated left.
The height of html, body, and div#sidebar is 100%.
My goal is to get div#sidebar to extend all the way down to the bottom of the page regardless of browser size or content size. Obviously, if the content is longer than the viewable page height it should act normally and push past the end of the page, introducing scroll bars.
However, as it stands now, it seems the page height has been calculated as 100% + 100px, introducing scrollbars even though there is no content that would push div#sidebar down. So far I have found no solutions that work, or perhaps I have missed it or messed a solution up; regardless, I've been at this for well over an hour and I'm about to rip my hair out.
Is there a non-JavaScript method of getting this to work properly to stop the header's height being added to 100%?
Here is my HTML/CSS - although I included all relevant details above, this should help.
<!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;
}
You're looking for the infamous "faux-columns" technique. Here's a tutorial.
Basically, you can't do it with a simple background color, you have to use a repeating background image.
这篇关于HTML / CSS全高度边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
