我在互联网上发现了很多关于这个问题的讨论和问题,然而,它们似乎都不符合我的情况,解决方案对某种情况非常具体.
我有一个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;
}
小智 12
我发现本文中概述的方法是解决问题的一种非常简单的方法.
你需要用另一个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的边距不是!).