我在动态调整侧边栏div的高度以匹配内容div时遇到问题。 基于此处的各种其他问题和谷歌搜索,我认为没有高度设置,它将使用父div高度,但它似乎自动适应内容的高度。
这可以在“baradineholdings.com.au”上看到(请不要判断该网站,我是一个菜鸟,我宁愿让我的基础工作正常,然后才能让它'漂亮')。 / p>
主页看起来很好,主要是因为没有内容。如果您前往about页面,您可以看到问题。我几乎怀疑在主页的实例中,内容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,但即使在about页面中使用大量内容,它也会变小,所以它不会影响侧边栏... 我在Chrome和IE中测试过,都有同样的问题。
答案 0 :(得分:3)
使用现有代码可以轻松修复此问题。这里概述了基本方法:CSS Equal Height Columns。
基本上,你通过将侧边栏颜色添加到包装div来伪造它(在你的情况下,你可以使用你现有的#internal)。因为这个div实际上包含了主要内容,所以它会根据需要扩展。为了使它看起来像是侧边栏,您可以为主要内容提供与您的身体相匹配的背景颜色。实际的侧边栏div没有背景,它只保存文本。你可能需要看到这个实际上有意义,但这里是CSS的相关部分:
#internal {
background-color: #27408B; /* the color you want for the sidebar */
}
#content {
background-color: #f1f1f1; /* matches the body background */
}
然后从#sidebar中删除背景色线。 (我还必须向#internal添加一个浮点数并将其宽度更改为auto以使其工作正常。)
答案 1 :(得分:0)
你想要完成的是什么?蓝色侧边栏与de内容区域中的文本具有相同的高度?
如果是这样,最简单的方法是将蓝色背景图像放到包含侧边栏和内容div的div中。
要做到这一点,你必须把&lt; div style =“clear:both”&gt;&lt; / DIV&GT;在你的&lt; div class =“content”&gt; ...&lt; / div&gt;
这样,你的id内部div将随de浮动子元素的高度增长。
<div class="sidebar">...< /div><br />
<div class="content">...< /div><br />
< div style="clear:both">...< /div><br />
之后,您可以添加重复的蓝色图像:
#internal {
background: url(blue.png) top left repeat-y;
}
另一种方法是使用jquery / css hacks,但我怀疑这是值得的。