CSS 相对定位溢出（压扁的 div 问题）div 高度随内容扩展？

Question

我正在尝试编辑一些 CSS 以在我的网站的右侧和左侧添加一个边框。我的问题是，当我将高度设置为 100% 或自动时，什么也没有发生，但是当我改变高度时它可以工作，但我不能使用它，因为我希望它随着内容而改变。

我注意到在 expression web 中，我的 sitegrinder div 看起来过于挤压顶部，而不是内容的全长。这可能是由于定位吗？溢出可以以某种方式解决这个问题吗？

我已经包含了下面的css和html

  <div  id="sitegrinder">
    <div id="bgrepeat">
           <div id="id68logo"></div>
                  <div id="bglight"></div>
                        <div id="topbanner"></div>
                               <div id="id53light"></div>


#sitegrinder  {
left: auto;
top:auto;
width: 960px;
position: relative;
margin:auto;  }

我还注意到，当我在 css 中包含 overflow:hidden 时，我的所有内容都显示在该 div 的顶部。

Answer 1

如果你想制作一个水平居中的 div，并以固定的 with 和图形作为左右边框，你应该使用这样的东西：

html:

<div id="wrapper">
    <div id="content">
        ...your content here...
    </div>
</div>

css:

#wrapper { width:980px; margin:0 auto;)
#content { margin:0 20; background transparen url(background_image.png) top center repeat-y; }

background_image.png 应该是一个宽度为 980 像素的图像。最左边的 10 个像素和最右边的 10 个像素是您的边框，您可以按照自己的方式设置样式。