css - 使用 CSS 解决河流城市的问题

Question

好的，这是网站：

http://danberinger.com/

如果您查看 HTML 和 CSS 的源代码，您可以看到我已将中间 div 的高度设置为 100%，并为其赋予了一个隐藏的溢出属性值，它被称为“main_content”。我意识到高度值对显示的内容没有影响，隐藏的溢出值允许 main_content div 的背景颜色向下延伸到页脚。我想我想知道在保持背景颜色的同时在每个页面上实现可变 div 高度或“main_content”的最佳方法是什么。我这样做是正确的方式还是我使用了某种不是正确方式的 css hack。欢迎所有见解。在给我答案之前，请务必查看源 HTML 和 CSS。

Answer 1

最简单的解决方案是将背景颜色分配给您的body元素。像这样的东西：

body {
 margin: 0;
 padding: 0;
 width:100%;
 height:100%;
 background-color:#cccccc;
}

这也将消除边缘周围的几个像素白色边框，如果你想保持它，取出marginandpadding声明。

Answer 2

我可能误解了你想要什么，但试试这个：

将 div#intro_container 替换为：

div#intro_container {
width:830px;
margin:auto;
overflow: hidden;
background-color:#333333;
}

并从 div#messagebox 中删除 height 属性。

Answer 3

我更喜欢这样做：

在 div 'main-content' 的内容中，添加

在你的情况下是

<div id="main_content">
    <div id="navigation">..</div>
    <div id="intro_container">..</div>
</div>

它可以重写为

<div id="main_content">
    <div id="navigation">..</div>
    <div id="intro_container">..</div>
    <div style="clear:both"></div>
</div>

AFAIK 这是实现你在做什么的标准方法。