我在互联网上发现了很多关于这个问题的讨论和问题,然而,它们似乎都不符合我的情况,解决方案对某种情况非常具体.
我有一个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; …