標題組合 - main_wrapper爲頁眉高度製作頁面滾動條

我正在製作具有固定頁腳的網頁。如果有很多內容，則必須有一個滾動條。如果內容部分中只有一行輸入，則不需要滾動。現在製作頁面的方式，一直給我一個滾動條！它滾動得很遠，以便標題從屏幕上消失。 - >我的標題是150px高，我可以精確滾動150px。但我不想要這個。我的html或CSS有什麼問題？標題組合 - main_wrapper爲頁眉高度製作頁面滾動條

這是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我的代碼。

我在做什麼錯？（看看the picture的滾動條）在此先感謝！

來源

2013-04-01 Jootje

我工作圍繞它用這樣的解釋：http://dorayme.netweaver.com.au/ciaran.html

我的包裝現在有一個位置是：絕對有頂：底：等於頁眉和頁腳的高度（+邊框的高度）

#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; 
}

Thx to JohanSundén推動我走向正確的方向！

來源

2013-04-02 09:37:59 Jootje

刪除高度：主包裝上的100％。 100％的高度意味着父級內部可用空間的100％（標頭和主包裝具有相同的父級）。但是main-wrapper不知道標題的高度。所以結果將是100％+ 150px。

來源

2013-04-01 15:45:16

好的，我明白了。但是，當我刪除main_wrapper的高度時，這會導致我的內容的背景停止並留下白色塊，直到頁腳。 – Jootje

我在第一篇文章中添加了一張圖片。當我刪除main_wrapper的高度時，所有內容都會在我的

標籤後消失，並且只剩下頁面底部的頁腳。 – Jootje

不能只將背景圖像樣式放在body標籤上嗎？ –

我做了一些風格調整。我給你的容器百分比高度（你可以根據你的需要調整它們）並將屬性滾動到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-01 17:12:40

嗨Saurav，thx的輸入，但這並沒有辦法。標題是150px。我不想要一個滾動條（除非文本數量太長而無法顯示）。現在我的文字很少（1句），所以不應該可以滾動。現在我創建了我的css/html，我可以向下滾動150px。這不應該發生。 – Jootje

@ user2231930看起來你喜歡下面的東西，而不管屏幕大小。 1>標題應爲150px 2>頁眉和頁腳應始終可見。 3>只有中間容器纔會根據內容進行滾動請告知我我是否正確。 –

對不起，我不明白你想說什麼。（不管?? ??） – Jootje

標題組合 - main_wrapper爲頁眉高度製作頁面滾動條

回答

相關問題