使用CSS动态调整DIV大小

时间:2012-02-03 00:16:10

标签: css dynamic html

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

2 个答案:

答案 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以使其工作正常。)

Here it is in JSFiddle

答案 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,但我怀疑这是值得的。