网站 DIV 布局需要帮助
我正在尝试构建一个包含以下内容的页面：
已经具有以下内容：
- 页面的一个 div 使整个页面居中，宽度为 809px，
- 内
是下列的：（内容容器）
我正在努力解决的问题：
应包含以下内容：- 最左边的
与容器的高度为 100%，左侧阴影图像作为的背景 - 左第二个
，容器高度为 100%（将包含页面内容 - 右第二个
- 最右边的
与容器的高度为 100%，以右侧阴影图像作为的背景
- 最左边的
总结一下：
<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 的行为应该与表格非常相似。
I am trying to build a page with the following in it:
Already have the following:
- one div for page to center the whole page with width 809px
- inside
<div class="page">is the following:<div class="header"><div class="container">(container for content stuff)<div class="footer">
What I am struggling with:
<div class="container">should contain the following:- leftmost
<div class="leftShadow">with 100% height to container, with left shadow image as background for<div class="leftShadow"> - second to left
<div class="custom_content">with 100% height to container (will contain content of page - second to right
<div class="sidebar_right">with 100% height to container (will contain extra links) - rightmost
<div class="rightShadow">with 100% height to container, with right shadow image as background for<div class="rightShadow">
- leftmost
So to summarise:
<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>
So what is supposed to happen is, when either custom_content or sidebar_right div's strength in length below the other, the other one would stretch in height to be the same with as the longer div. Obviously, both side div's (leftShadow and rightShadow) should also stretch to 100% of the container's height.
Can someone please guide me in the right direction? Basically, these div's should behave much like a table would when one td's content stretches beyond the height of the other td's.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
不要像表格一样使用 div！
leftShadow 和 rightShadow div 是完全没有必要的。 将背景图像组合成单个图像并将其设置为容器 div 的背景。
要确保背景图像填充容器的高度，请设置background-repeat：repeat-y。
Don't use divs like tables!
The leftShadow and rightShadow divs are completely unnecessary. Combine your background images into a single image and set it as the background of your container div.
To make sure the background image fills the height of the container, set background-repeat: repeat-y.
为什么不使用“假柱”之类的东西？
请参阅http://www.alistapart.com/articles/fauxcolumns/
Why not use something like "Faux Columns"?
See http://www.alistapart.com/articles/fauxcolumns/
也许您不需要 leftShadow 和 rightShadow div：看看faux columns。
我希望这就是您正在寻找的。 :)
Perhaps you won't need the leftShadow and rightShadow divs: take a look at faux columns.
This is what you are looking for, I hope. :)
我会以不同的方式这样做，因为你不会让你的 div 表现得像表格一样。
我不完全确定您希望它看起来像什么，但我猜您想要在容器 div 的左侧和右侧有某种阴影图像。 如何删除 leftShadow 和 rightShadow div，在宽度为 809px 的内容 div 上放置一个可重复的背景图像（高度可能为 1，具体取决于阴影图像的外观）。 也许还可以在内容 div 上设置溢出：隐藏 - 如果我没记错的话，这是一种 hack，它将使包含的 div 在这种情况下拉伸。
I'd do this differently because you're not going to get your divs to behave like tables.
I'm not entirely sure what you're wanting this to look like, but I'm guess you want some sort of shadow image down the left and right side of the container div. How about removing the leftShadow and rightShadow divs, put a repeatable background image on the content div of width 809px (and maybe height 1, depending on what your shadow image looks like). Also perhaps set overflow:hidden on the content div - if I remember rightly thats a kind of hack which will make the containing div stretch in this situation.