有人可以发现错误或告诉我如何解决问题吗？
我有下面网站的 HTML 和 CSS。我希望侧边栏的高度与其旁边的内容部分相同，因此它们都延伸到网页的底部。在 html、body 和 div 元素上使用 height: 100% 会给出完整的浏览器高度，而不是内容的高度。离开高度会使侧边栏太短。有没有办法让内容和侧边栏(部分导航)匹配？
这是我当前编写的 CSS:
html
{
min-height:100%;
position: relative;
}
body
{
margin: 0;
padding: 0;
font-family: "Sans-serif", calibri;
}
.headerreplacement
{
width: 100%;
height: 250px;
margin: 0 0 0 0;
background: url(newspaperbanners.png) no-repeat;
}
#navigation
{
float: left;
background: #333;
width: 100%;
}
#navigation ul
{
margin: 0;
padding: 0;
}
#navigation ul li
{
list-style-type: none;
display: inline;
}
#navigation ul li a
{
display: block;
float: left;
text-decoration: none;
width: 100px;
color: white;
text-align: center;
padding: 10px 10px;
}
#navigation li a:hover
{
background: #996699;
text-decoration: underline;
}
.visiting_link
{
background: #333;
clear:both;
}
.submenu
{
clear:both;
padding-left: 20px;
}
#content-container
{
width: 100%;
margin: 0;
padding:0;
}
#section-navigation
{
width: 280px;
position: relative;
background-color: #996699;
margin: 0;
height: inherit;
}
#section-navigation ul
{
margin: 20px;
padding: 0;
}
#section-navigation ul li
{
list-style-type: none;
}
#section-navigation ul li a
{
display: block;
color: white;
text-decoration: none;
padding: 10px 10px;
}
#section-navigation ul li a:hover
{
background: #333;
text-decoration: underline;
}
#content
{
float: left;
width:50%;
overflow: hidden;
height:100%;
margin: 0 200px 50px 50px;
}
HTML 的基本概要如下。然而，在 div id="content"部分，其他网页上会有更多文本。
<head>
<title> Uniform and Equipment | Scottish Fire Services: Inter War Years
</title>
<link rel= "stylesheet" href="stylesheet.css"/>
<!-- Metadata goes here -->
</head>
<body>
<div id="header">
<h1 class="headerreplacement"> </h1>
</div>
<div id="navigation">
<ul>
<li><a href="homepage.html">Home </a></li>
<li><a href="about.html">About</a></li>
<li><a href="references.html">References</a></li>
<li><a href="sitemap.html">Sitemap</a></li>
</ul>
<form id="searchbar" ><p> <label> Search <input type="search"/> </form>
</div>
<div id="content-container">
<div id="section-navigation">
<ul>
<li ><a href="historical_context.html">The Inter-War Period, 1918-1939</a></li>
<li><a href="auxiliary_fire_service.html"> The Auxiliary Fire Service</a></li>
<li><a href="camaraderie.html">Firehouse Camaraderie</a></li>
<li><a href="fire_brigades_in_scotland.html">Fire Brigades in Scotland</a></li>
<li><a href="fire_trucks.html">Fire Trucks</a></li>
<li><a href="legislation_changes.html">Legislation Changes</a></li>
<li><a href="major_fires.html">Major fires</a></li>
<li class="visiting_link"><a href="uniform_equipment.html">Uniform and Equipment </a></li>
<li class="submenu" ><a href="uniforms.html">Uniforms</a></li>
<li class="submenu"><a href="auxiliary_fire_service_uniform.html">Auxiliary Fire Service Uniform</a><li>
<li class="submenu"><a href="equipment.html">Equipment</a></li>
</ul>
</div>
<div id="content"> <!-- Content can be changed -->
<h1> Uniform and Equipment </h1>
<p> During the inter war years, there were some small changes to the uniform and equipment of the Scottish Fire Services.</p>
<!-- side by side images, where the image is the link, description underneath-->
<div class="multiple-images">
<a href="uniforms.html">
<img src="uniform.png" alt="Photo of two men in full firefighting uniform"
width="200px" height="265px">
</a>
<div id="description-hyperlink"><a href="uniforms.html">More about uniforms</a></div>
</div>
<div class="multiple-images">
<a href="equipment.html">
<img src="equipment.jpg" alt="Photo fire engines"
width="200px" height="265px">
</a>
<div id="description-hyperlink"><a href="equipment.html">Read more about equipment</a></div>
</div>
</div>
</div>
</body>
希望这一切都有意义。我已经尝试使用在这个网站上找到的很多不同的建议，但我似乎无法发现如何解决这个问题。非常感谢您。
最佳答案
这是我根据您所说的内容收集到的您的意思的最佳解释； (将这些添加到您当前的 CSS 中):
#section-navigation { float:left; }
#section-navigation ul { height:100%; }
#content { margin:0 200px 0 50px; }
如果我错了请纠正我。祝你好运!
关于html - 两个 div 的高度 - 内容和侧边栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29758269/