1

固定フッターのある Web ページを作成しています。コンテンツが多い場合は、スクロール バーが必要です。content-part に 1 行しか入力がない場合は、スクロールする必要はありません。このページの作り方では、常にスクロール バーが表示されます。ヘッダーが画面から消えるまでスクロールします。--> ヘッダーの高さが 150px で、正確に 150px スクロールできます。しかし、私はこれを望んでいません。HTML または CSS の何が問題になっていますか?

これはhtmlです：

<body>
<div id="header">
    <h1>The <span>ultimate</span><br />DVD collection</h1>
</div>
<div id="main_wrapper">
    <div id="main">
        <div id="choose">#abcdefghijklmnopqrstuvwxyz</div>
        <div id="content">Main content comes here.</div>
    </div>
</div>
<div id="footer">
    <p>My Name <span>admin log-in</span>
    </p>
</div>

これが私のCSSです：

html, body {
    height: 100%;
    margin: 0 auto;
}
body {
    font-family: Helvetica, Arial, sans-serif;
    color: #666;
    font-size: 12px;
    line-height: 1.5em;
    /*position: relative;*/
}
#header {
    height: 150px;
    background: linear-gradient(left, #2a2620, #a35e47);
    border-top: 10px solid #f6e6c5;
    border-bottom: 10px solid #f6e6c5;
    background-color: #a35e47;
}
h1 {
    width: 960px;
    margin: 35px auto 0;
    font-family:'Luckiest Guy', cursive;
    font-size: 3.5em;
    line-height: 1em;
    text-transform: uppercase;
    font-weight: 400;
    color: #a35e47;
    text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
}
h1 span {
    font-family:'Aclonica', Verdana, sans-serif;
    font-size: 1.75em;
}
#main_wrapper {
    height: 100%;
    min-height: 100%;
    background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
    background-repeat: no-repeat;
    background-position: 50% 60%;
    background-color: #5a646d;
}
#main {
    width: 960px;
    height: 100%;
    margin: 0 auto;
    background-color: #fff;
    opacity: .75;
    /*overflow: auto;*/
}
#choose {
    margin-left: 20px;
    font-family: georgia, serif;
    font-style: italic;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 1.5em;
    line-height: 2em;
    letter-spacing: 20px;
    overflow: hidden;
}
#content {
    margin-left: 20px;
    margin-right: 20px;
}
#footer {
    height: 40px;
    width: 100%;
    border-top: 10px solid #f6e6c5;
    background: linear-gradient(left, #2a2620, #a35e47);
    position: fixed;
    left: 0;
    bottom: 0;
}

このjsFiddleで私のコードを見ることもできます。

私は何を間違っていますか？（写真のスクロールバーを見てください）よろしくお願いします！

4

3 に答える 3

0

メインラッパーの height:100% を削除します。100% の高さは、親内の使用可能なスペースの 100% を意味します (ヘッダーとメイン ラッパーは同じ親を持ちます)。しかし、メインラッパーはヘッダーの高さを認識していません。したがって、結果は 100% + 150px になります。

于 2013-04-01T15:45:16.957 に答える
0

私はスタイルでいくつかの調整を行いました。コンテナの高さのパーセンテージを指定し（必要に応じて調整できます）、スクロールプロパティをdivに指定しました。

    <style>
    html, body {
        height: 100%;
        margin: 0 auto;
    }
    body {
        font-family: Helvetica, Arial, sans-serif;
        color: #666;
        font-size: 12px;
        line-height: 1.5em;
        /*position: relative;*/
    }
    #header {
        height: 15%px;
        background: linear-gradient(left, #2a2620, #a35e47);
        border-top: 10px solid #f6e6c5;
        border-bottom: 10px solid #f6e6c5;
        background-color: #a35e47;
    }
    h1 {
        width: 960px;
        margin: 35px auto 0;
        font-family:'Luckiest Guy', cursive;
        font-size: 3.5em;
        line-height: 1em;
        text-transform: uppercase;
        font-weight: 400;
        color: #a35e47;
        text-shadow: 0px 0px 2px #f6e6c5, 4px 4px 8px #000000;
    }
    h1 span {
        font-family:'Aclonica', Verdana, sans-serif;
        font-size: 1.75em;
    }
    #main_wrapper {
        /*height: 100%;*/
        /*min-height: 100%;*/
        background-image: url('http://4.bp.blogspot.com/-jPxP0Hgum7o/T0OiL_IupqI/AAAAAAAAAMs/Xu5zNtqULoE/s1600/IMG_0665+Hollywood+star.jpg');
        background-repeat: no-repeat;
        background-position: 50% 60%;
        background-color: #5a646d;
    }
    #main {
        width: 960px;
        height: 70%;
        margin: 0 auto;
        background-color: #fff;
        opacity: .75;
        /*overflow: auto;*/
        overflow:scroll;
    }
    #choose {
        margin-left: 20px;
        font-family: georgia, serif;
        font-style: italic;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 1.5em;
        line-height: 2em;
        letter-spacing: 20px;
        overflow: hidden;
    }
    #content {
        margin-left: 20px;
        margin-right: 20px;
    }
    #footer {
        height: 15%;
        width: 100%;
        border-top: 10px solid #f6e6c5;
        background: linear-gradient(left, #2a2620, #a35e47);
        position: fixed;
        left: 0;
        bottom: 0;
    }
    </style>
于 2013-04-01T17:12:40.773 に答える
0

この説明を使用して回避しました：http://dorayme.netweaver.com.au/ciaran.html

私のラッパーには、ヘッダーとフッターの高さ (+ ボーダーの高さ) に等しい top: と bottom: の position:absolute があります。

#main_wrapper{
position: absolute;
top: 170px; /* header + bordertop + borderbottom */
bottom: 50px; /* footer + bordertop */
left: 0;
right: 0;
background-image: url('path/to/img.jpg');
    background-repeat: no-repeat;
background-position: 50% 40%;
background-color: #5a646d;
}

私を正しい方向に押してくれた Johan Sundén に感謝します!!

于 2013-04-02T09:37:59.347 に答える