-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>

ただし、コンテンツ 1 セクションをコンテンツ 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 に答える