0

我有一个容器 div，每边都有两个侧边栏，中间有一个内容框。标准的“博客”布局。内容远远超出了侧边栏，侧边栏高度在我的最后一句话处停止。如何扩展高度以便自动扩展到页面底部，从而在中间的内容框的末尾？

4

6 回答 6

2

这是如何做到的：

的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”：

  1. 打开 Photoshop 或任何图像编辑器
  2. 制作一个 1px 高和 1px 宽的新图像。
  3. 给它上色，你希望你的背景是什么颜色。
  4. 将图像保存为“dot.jpg”并上传到您网站上的“图像”文件夹。

不工作？

访问http://yourwebsite.com/images/dot.jpg并查看您是否看到点图像。如果您看到“404 未找到”错误，则说明您使用了错误的 URL。修复 URL，它将起作用。

笔记：

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

祝你好运！

于 2011-09-23T02:00:07.357 回答
1

看看CssPlay.co.uk

于 2009-08-05T00:45:38.570 回答
0

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

于 2010-08-23T15:38:09.270 回答
0

我在不同的项目中多次遇到这个问题，但我找到了适合我的解决方案。您必须使用四个 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”&gt;
<div class=”sidebar”&gt;</div>
<div class=”content”&gt;</div>
<div id=”footer”&gt;</div>
</div>

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

于 2010-08-22T21:37:33.670 回答
0

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

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

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

更多信息请访问：

A List Apart：文章：Faux Columns

于 2009-08-05T00:43:49.303 回答
0

基本上你不能。如果您试图让设计元素（例如背景图像）一直延伸到底部，最好的方法是伪造它。我的意思是创建一个包装器来包装您的所有侧边栏和内容，并使您的背景图像成为该包装器的背景。然后它会一直延伸到底部。

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

于 2009-08-05T00:44:05.887 回答