Question

我有一个容器div，每侧有两个侧边栏，中间有一个内容盒。标准的“博客”布局。内容越过侧边栏，侧栏高度停在我的最后一句话。如何扩展高度以便自动延伸到页面底部，从而将内容框的末尾放在中间？

Answer 1

以下是如何操作：

HTML：

<div id="container">
    <div id="main">
        Content...
    </div>
    <div id="sidebar">
        Content...
    </div>
</div>

CSS：

#container {
   width: 1000px;
   background: url(http://yourwebsite.com/images/dot.jpg) repeat;
   overflow: auto;
}
#main {
   width: 70%;
   float: left;
}
#sidebar {
   width: 30%;
   float: right;
}

如何制作“dot.jpg”：

打开photoshop或任何图片编辑器
制作1px高度和1px宽度的新图像。
为您想要的背景颜色添加颜色。
将图片另存为“dot.jpg”并上传到您网站上的“图片”文件夹。

不起作用？

访问http://yourwebsite.com/images/dot.jpg并查看如果你看到一个点图像。如果您看到“404 not found”错误，那么您正在使用错误的网址。修复网址，它会起作用。

注意：

将“yourwebsite.com”更改为您的网站。

Answer 2

查看CssPlay.co.uk

Answer 3

不幸的是，没有万无一失的方法来实现这一目标。

在不使用JavaScript的情况下执行以下操作的一种方法是使用名为 Faux-Columns 的技术。

它基本上涉及将background-image应用于浮动元素的父元素，这使您相信这两个元素的高度相同。

更多信息请访问：

A List Apart: Articles: Faux Columns

Answer 4

基本上你不能。如果你想要一个设计元素（比如一个背景图片）一直延伸到底部，最好的办法就是假装它。我的意思是创建一个包装器，它包装所有的侧边栏和内容，并使您的背景图像成为该包装器的背景。然后它将一直延伸到底部。

另一种方法，如果你真的想要（畏缩）就是使用表格。但请不要。

Answer 5

我在不同的项目上多次遇到过这个问题，但我找到了一个适合我的解决方案。您必须使用四个div标签 - 一个包含侧边栏，主要内容和页脚。

首先，设置样式表中元素的样式：

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

您可以根据需要编辑不同的元素，但请确保不要更改页脚属性“clear：both” - 这一点非常重要。

然后，只需设置您的网页：

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

我在http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container写了一篇更深入的博客文章。请让我知道，如果你有任何问题。希望这有帮助！

Answer 6

你是对的！好抓 - 100％高度声明是不必要的！谢谢:)两个最重要的事情是侧边栏的背景图像或颜色与容器的相同，并且底部div（本例中的“页脚”）具有属性“clear：both”。我认为其他所有内容都可以根据需要进行编辑......

侧边栏Div延伸容器的整个高度

6 个答案: