1

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

已经有以下内容：

  • 页面的一个 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_rightdiv 的长度低于另一个时，另一个将在高度上拉伸到与较长的 div 相同。显然，两侧的 div（leftShadow 和 rightShadow）也应该拉伸到容器高度的 100%。

有人可以指导我正确的方向吗？基本上，当一个 td 的内容超出另一个 td 的高度时，这些 div 的行为应该很像表格。

4

4 回答 4

4

不要像表格一样使用 div！

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

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

于 2009-06-08T13:42:50.820 回答
1

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

见http://www.alistapart.com/articles/fauxcolumns/

于 2009-06-08T13:44:03.377 回答
0

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

这就是你要找的，我希望。:)

于 2009-06-08T13:45:58.113 回答
0

我会以不同的方式这样做，因为你不会让你的 div 表现得像表一样。

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

于 2009-06-08T13:49:45.703 回答