Question

我正在尝试构建一个包含以下内容的页面：

已经有以下内容：

页面的一个div，以整个页面为中心，宽度为809px

<div class="page">

<div class="header">
<div class="container">（内容容器的容器）
<div class="footer">

我正在努力解决的问题：

<div class="container">应包含以下内容：
- 最左侧<div class="leftShadow">，容器高度为100％，左侧阴影图像为<div class="leftShadow">的背景
- 第二个到左<div class="custom_content">，容器的高度为100％（将包含页面内容
- 第二个到右<div class="sidebar_right">，容器的高度为100％（将包含额外的链接）
- 最右侧<div class="rightShadow">，容器高度为100％，右侧阴影图像为<div class="rightShadow">的背景

总结一下：

<div class="page">
    <div class="header">header image</div>
    <div class="container">
        <div class="leftShadow"><img src="images/spacer.gif" alt="" /></div>
        <div class="custom_content">(this is where the content would be)</div>
        <div class="sidebar_right">(some other links)</div>
        <div class="rightShadow"><img src="images/spacer.gif" alt="" /></div>
</div>

所以应该发生的是，当custom_content或sidebar_right div的长度低于另一个时，另一个将在高度上拉伸到与更长的div相同。显然，两侧div（leftShadow和rightShadow）也应该延伸到容器高度的100％。

有人可以指导我朝正确的方向前进吗？基本上，当一个td的内容超出其他td的高度时，这些div应该像表格一样。

Answer 1

不要像桌子那样使用div！

leftShadow和rightShadow div完全没必要。将背景图像合并为一个图像，并将其设置为容器div的背景。

要确保背景图像填充容器的高度，请设置background-repeat：repeat-y。

Answer 2

为什么不使用“Faux Columns”之类的东西？

请参阅http://www.alistapart.com/articles/fauxcolumns/

Answer 3

也许你不需要leftShadow和rightShadow div：看看faux columns。

我希望这是你要找的。：）

Answer 4

我之所以这样做是因为你不会让你的div表现得像桌子一样。

我不完全确定你想要它看起来像什么，但我猜你想要在容器div的左侧和右侧放置某种阴影图像。如何删除leftShadow和rightShadow divs，将可重复的背景图像放在宽度为809px的内容div上（可能高度为1，具体取决于阴影图像的样子）。也许设置溢出：隐藏在内容div上 - 如果我没记错的话，那就是在这种情况下会使包含div伸展的黑客。

站点的DIV布局需要帮助

4 个答案: