Question

我创建了以下网页。

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 styling; browser display

Answer 1

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

要简要说明一下，您要为min-height: 100%;类设置.content，以确保它会延伸到内容占用的最大高度或页面的最大高度。然后，您将content-2 div置于absolute位置，并将左边距设置为content-1的宽度。

如何使div填充剩余的屏幕空间和内部div具有相同的高度？

1 个答案: