0

私は周りを検索して、この問題に対する解決策をたくさん見つけましたが、どれもうまくいかないようです。

.containerBody div をページの一番下まで広げようとしています。ページが読み込まれると問題なく表示されますが、スクロールして表示する必要があるコンテンツを含むページでは、.containerBody div はビューポートの下部 (または、ページが読み込まれたときのビューポートの下部) で終了します。コンテンツが最初の画面に収まるページの場合、これは明らかに問題ではありません。ただし、より多くのコンテンツを含むページの場合、.containerBody は単純に途中で終了します。

CSS

html, body {
    padding: 0;
    margin: 0;
    min-height: 100%;
    font-family: Arvo, serif;
    font-weight: normal;
    font-size: 11.5px;
    color: #333;
}

.containerBody {
    width: 1000px;
    height: 1000%;
    background-color: #FCFCFD;
    margin: 0 auto;
    position: relative;
}

#tagtop {
    width: 240px;
    height: 110px;
    margin-top: 0px;
    margin-left: 120px;
    position: relative;
}

.topContent {
    float: left;
    clear: both;
    width: 340px;
    padding-left: 647px;
    margin-top: -95px;
    position: relative;
    font-size: 10px;
}

.topContent a {
    color: #333;
}

.topContent a:hover {
    color: #E9194E;
}

.bonusText {
    display: inline;
    font-family: Arvo,serif;
    font-size: 13.25px;
    font-weight: bold;
    color: #E9194E;
}

HTML

<body>
<div class="containerBody">
    <div id="tagtop"> <a href="index.html"><img src="image.png"</img>
    <h1>Text<div class="bonusText">text</div></h1></a>
    </div>
    <div class="topContent"> 
        Text
        <a href="www.google.ca">Link1</a>
        <a href="www.google.ca">Link2</a>
    </div>
    <div class="workcontainer">
        Title<br><br>
        <img src="assets/placeholder.png">
        <div class="workwords">Text</div>
        <div class="worktags">Text</div>
        <img src="assets/placeholder.png">
        <img src="assets/placeholder.png">
        <img src="assets/placeholder.png">
    </div>
</div>
</body>

min-height を使用して上下の位置を 0 に設定しようとしましたが、読み込まれたビューポートの下部ではなく、コンテナーをページの下部まで伸ばすことに成功しませんでした。ヘルプ？

4

1 に答える 1