Question

我在动态调整侧边栏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中测试过，都有同样的问题。

Answer 1

使用现有代码可以轻松修复此问题。这里概述了基本方法：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以使其工作正常。）

Here it is in JSFiddle

Answer 2

你想要完成的是什么？蓝色侧边栏与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，但我怀疑这是值得的。

使用CSS动态调整DIV大小

2 个答案: