#CSS 包装器无法识别内容

Question

从上周开始，我在缺席大约 2 年后再次尝试制作网站。它进行得很顺利，直到我注意到当我最小化浏览器时，内容不会保留在包装器中。我一直在本网站和谷歌上寻找解决方案，但我似乎找不到合适的解决方案。大多数解决方案都提到了 #float 和溢出的问题，但我不使用 float（希望这不是问题），我一直在玩溢出，但我无法让它工作。

您可以在下面找到我使用的CSS和HTML代码。

该 HTML：

 <div id="wrapper">
        <div id="content">
            <div id="header">
                <div id="logo">
                <img src="style/images/logo.gif" width="184" height="73" alt="logo" />
                </div>
                <div id="menu">
        <ul id="navlist">
                      <li id="active"><a href="#" id="current">1</a></li>
                      <li>2</li>
                      <li>3</li>
                      <li>4</li>
                      <li>5</li>
                    </ul>
                </div>
            </div>
            <div id="main">
                Title
                subtitle
            </div>
            <div id="footer">
                <div id="left_banner">

                </div>
                <div id="right_banner">

                </div>
            </div>
        </div>
    </div>

和 CSS

html, body, ul, li {
    margin:0px;
    padding:0px;
    height:100%;
}
#wrapper {
    text-align: center;
background:url(images/bg.gif);
    background-repeat:repeat;
    height:100%;
    width: 100%;
    overflow:auto;
} 
#content {
    background-color: #fff;
    margin: 0px auto;
    width: 780px; 
    height: 100%;
    border-left:#fd5d78 4px solid;
    border-right:#fd5d78 4px solid;
}
#header {
    position:relative;
    height:120px;
}
#logo {
    position:absolute;
    right:43px;
    top:37px;
}
#menu {
    position:absolute;
    bottom:0px;
    left:58px;
}

#main {
    position:relative;
    left:25px;
    top:35px;
    width:730px;
    height:320px;
}
#footer {
    position:relative;
    width:730px;
    left:25px;
    top:70px;
    background-color:#0F0;
    clear:both;
}
#left_banner {
    position:absolute;
    left:0px;
    width:349px;
    height:134px;
    border:#fd5d78 2px solid;
    background-color:#FFF;
}
#right_banner {
    position:absolute;
    right:0px;
    width:349px;
    height:134px;
    border:#fd5d78 2px solid;
    background-color:#FFF;
}

感谢您的帮助。

Answer 1

尝试将display:block;添加到 #wrapper

Answer 2

jsfiddle

我知道你说你不使用浮点数，但这里有一个使用它们的解决方案。 您遇到的最大问题之一是您将两个页脚横幅设置为绝对位置，这会抛弃父div 的 100% 高度。 使用浮点数和溢出：隐藏，您可以将这些div带回100%计算中。

我不得不对你的css进行许多更改，所以把我在jsfiddle中的内容作为你的起点。