0

私はこれに対する解決策を探すのに数時間を費やしましたが、役に立ちませんでした。

少なくともページの下部まで拡張したいコンテンツ div がありますが、テキストがないときにそれを超えないようにします。関連するコードは次のとおりです。

#top {
 background-image: url('image.png');
 width: 798px;
 position:absolute;
 top:0px;
 margin-left:-399px;
 left:50%;
 display: block;
 height: 132px;
}

#content {
 position:absolute;
 top:132px;
 width: 798px;
 margin-left:-399px;
 left:50%;
 display: block;
 min-height:100%;
}

<body>

<div id="top"></div>
<div id="content">TEXT</div>

</body>

問題は、ご覧のとおり、コンテンツ div がヘッダーの後、ページの 132 ピクセル下から始まることです。これは、下にスクロールして確認できる 132 ピクセルの余白に変換されます。この空白は、テキストで埋め尽くされた長いページにはありませんが、短いホームページでは問題になります。

content div を bottom:0; に設定してみました。しかし、逆の効果があったため、div が画面の最初の一番下の行より下に拡張されず、長いページではテキストが div の外に出てしまいました。

残念ながら、パディングは負にならないので、132px をそのように削ることはできません。

どんな提案でも大歓迎です。

4

1 に答える 1

0

コンテナーを追加し、その最大高さを 100% に設定します。コンテナー内で、トップとコンテンツの個々の最大高さを設定しますか?

CSS:

#container {
    min-height:100%;
}
#top {
    background-image: url('image.png');
    width: 798px;
    position:absolute;
    top:0px;
    margin-left:-399px;
    left:50%;
    display: block;
    min-height:132px;
}
#content {
    position:absolute;
    top:132px;
    width: 798px;
    margin-left:-399px;
    left:50%;
    display: block;
    min-height:100%;
}

HTML:

<body>
    <div id="container">
    <div id="top"></div>
    <div id="content"><p>TEXT</p></div>
    </div>
</body>
于 2013-02-17T02:43:26.807 に答える