我在动态调整边栏 div 的高度以匹配内容 div 时遇到问题。 基于此处的各种其他问题和谷歌搜索，我认为如果没有设置高度，它会使用父 div 高度，但它似乎会自动将高度调整为内容。
这可以在“baradineholdings.com.au”上看到(请不要评判该网站，我是一个菜鸟，我宁愿让基础知识正常工作，然后再让它变得“漂亮”)。
首页看起来不错，主要是没有内容。如果您前往关于页面，您可以看到该问题。我几乎怀疑在主页的实例中，内容 div 占据了侧边栏 div 的高度，但我不确定为什么。
HTML；
<body>
<div id="wrapper">
<?php include('includes/header.php'); ?>
<div id="internal">
<div id="sidebar">
<h3>Navigation</h3>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="gallery.php">Gallery</a></li>
<li><a href="contact.php">Contact</a></li>
</div> <!-- end #sidebar -->
<div id="content">
<p>Images Coming Soon!</p>
<p>Please see the about page for more information.</p>
</div> <!-- end #content -->
</div> <!-- end #internal -->
<?php include('includes/footer.php'); ?>
</div> <!-- end #wrapper -->
</body>
CSS；
body {
background-color: #f1f1f1;
font-family: georgia,sans-serif;
color: #333;
margin: 0;
padding: 0;
}
#wrapper {
width: 960px;
background-color: #f1f1f1;
margin: 0 auto;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
#internal
{
width: 959px;
height: auto;
background-color: #f1f1f1;
margin: 0 auto;
border-right: 1px solid #ccc;
}
#content {
width: 675px;
height: auto;
float: left;
padding: 10px;
}
#sidebar {
width: 150px;
/* height: 410px; */
float: left;
background-color: #27408B;
color: white;
}
#sidebar a {
text-decoration: none;
color: white;
}
#sidebar li {
list-style: none;
}
正如我所说；小白。所以我可能在这里做了一些愚蠢的事情...... 我试过 jsfiddle，但即使在关于页面中使用大量内容，它也会使它变小，所以它不会影响侧边栏...... 我在 Chrome 和 IE 中测试过，都有同样的问题。
最佳答案
这可以用您现有的代码很容易地解决。此处概述了基本方法:CSS Equal Height Columns .
基本上，您可以通过将侧边栏颜色添加到包装器 div 来伪造它(在您的情况下，您可以使用现有的#internal)。因为这个 div 实际上包含主要内容，所以它会根据需要展开。为了让它看起来像一个侧边栏，您可以为主要内容提供与您的 body 相匹配的背景颜色。实际的侧边栏 div 没有背景，它只包含文本。您可能需要实际操作才能真正理解它，但这里是 CSS 的相关部分:
#internal {
background-color: #27408B; /* the color you want for the sidebar */
}
#content {
background-color: #f1f1f1; /* matches the body background */
}
然后从#sidebar 中删除背景色线。 (我还必须向 #internal 添加一个 float 并将其宽度更改为 auto 以使其正常工作。)
关于css - 使用 CSS 动态调整 DIV 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9121998/