我正在尝试在页面左侧制作一个与网站一样长的垂直导航栏(即向下延伸至页脚)。但是，只有当上面没有任何东西时，它才是正确的高度 - 当我添加网站的标题时，导航栏变得比网站长。
body{
padding: 0px;
margin: 10px auto 0 auto;
font-family: 'corbel','arial';
background: #fff;
color: #444; /* text colour */
max-width: 1500px;
height: auto;
position: relative;
}
footer{
background: #333;
color: #fff;
padding: .1em 3em;
width: auto;
margin-left: 130px;
}
h1{
text-align: center;
font-size: 85px;
padding: 10px;
margin: auto;
margin-top: 10px;
}
#content{
margin-left: 150px;
}
/* Navbar */
#navbar{
background-color: #599;
list-style-type: none;
overflow: hidden;
width: 130px;
margin: 0px;
font-family: 'corbel','arial';
text-align: center;
padding-left: 0px;
height: 100%;
float: left;
position: absolute;
}
#nav_li{
text-align: center;
}
#nav_a{
text-decoration: none;
margin: 10px;
display: inline-block;
color: white;
} <h1>Website Title</h1>
<body>
<ul id='navbar'>
<li id='nav_li'><a id='nav_a' href='index.html'>Home</a></li>
<li id='nav_li'><a id='nav_a' href='gallery.html'>Gallery</a></li>
<li id='nav_li'><a id='nav_a' href='reviews.html'>Our reviews</a></li>
</ul>
<div id='nav_fill'> </div>
<div id='content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<footer>
<p>Content © Business Name - Website design ©</p>
</footer>
</body>非常感谢任何可以提供帮助的人!
最佳答案
有多种方法可以解决此问题 - 最简单的方法是将 html, body 背景颜色作为 CSS 中的侧边栏(使用 height: 100%) ，然后在顶部和底部添加粘性 header 和 footer，并在容器元素上放置背景色。
像这样:
* { margin: 0; padding: 0;}
html, body {
height: 100%;
background: blue;
}
#content {
background: white;
}
h1 {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3em;
}
#menu {
margin-top: 3.5em;
float: left;
width: 7em;
color: white;
}
#content {
background: white;
height: 100%;
margin: 3em 0 4em 7em;
padding-top: 3.5em;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 4em;
background: gray;
}<body>
<h1>This is a heading</h1>
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div id="content">
<p>Something goes in here</p>
</div>
<footer>This is the footer</footer>
</body>关于html - 当元素位于其上方时，垂直导航栏会变长？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40650501/