-1

我创建了以下网页。

CSS：

*
{
    margin: 0;
}

html, body
{
    height: 100%;
}

#wrapper
{
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -44px; /* -44px being the size of the footer */
}

#header
{
    width: 100%;
    height: 60px;
    background: #e6e6e6;
}

#headerPlace
{
    width: 990px;
    height: 60px;
    margin: 0 auto;
    background: #ddd;
}

#content
{
    overflow: hidden;
    width: 990px;
    margin: 0 auto;
}

.content-1
{
    float: left;
    margin-right: -1px; /* Thank you IE */
    width: 190px;
    background: #bfb;
    padding-bottom: 500em;
    margin-bottom: -500em;
}

.content-2
{
    float: right;
    width: 800px;
    background: Aqua;
    padding-bottom: 500em;
    margin-bottom: -500em;
}

#footer, #push
{
    height: 44px;
}
#push
{
    width: 990px;
    margin: 0 auto;
    background: Aqua;
}

.content-1-push
{
    float: left;
    width: 190px;
    background: #bfb;
    position: absolute;
}

.content-2-push
{
    float: right;
    width: 800px;
    background: Aqua;
    position: absolute;
}
#footer
{
    width: 100%;
    background: #e6e6e6;
}

a img
{
    border: none;
}

HTML：

<body>
    <div id="wrapper">
        <div id="header">
            <div id="headerPlace">
                <a href="Default.aspx">
                    <img src="siteImages/logo.jpg" class="logo" />
                </a>
            </div>
        </div>
        <div id="content">
            <div class="content-1">
                content-1
            </div>
            <div class="content-2">
                content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2
                content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2
                content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2
                content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2
                content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2
                content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2
                content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2
                content-2 content-2 content-2 content-2 content-2 content-2 content-2 content-2

            </div>
        </div>
        <div id="push">
            <div class="content-1-push">
            </div>
            <div class="content-2-push">
            </div>
        </div>
    </div>
    <div id="footer">
        footer</div>
</body>

但是，我希望 content-1 部分与 content-2 的高度相同；也就是说，背景颜色不会显示在 content-1 下方，如附图所示。

CSS样式； 浏览器显示

4

1 回答 1

0

看看这个jsfiddle。它应该让你走上正确的道路。

简单解释一下，您要为类设置 ，min-height: 100%;以.content确保它将拉伸到内容占用的最大高度或页面的最大高度。然后你给你content-2 div一个absolute位置并将左边距设置为content-1.

于 2012-12-10T22:28:47.813 回答