CSS度100％的高度問題

所以我有一個HTML結構這樣CSS度100％的高度問題

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#container { 
 
    height: 100%; 
 
    min-width: 900px; 
 
    min-height: 650px; 
 
    background: #dddbd9 url('../images/bg.jpg') no-repeat center center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
    overflow: hidden; 
 
} 
 

 
#content { 
 
    clear: both; 
 
    height: 345px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    width: 790px; 
 
    padding: 20px; 
 
    overflow: hidden; 
 
} 
 

 
#bottomBar { 
 
    height: 100%; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
    padding: 0px; 
 
    background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x; 
 
}

<body> 
 
    <div id="container"> 
 
    <div id="content"></div> 
 
    <div id="bottomBar"></div> 
 
    </div> 
 
</body>

爲什麼#bottomBar高度一直延伸超過幾百個像素以上，而背景圖片僅僅是大約115px？

更新：我其實不想bottomBar只是115.我希望它佔據底部的整個剩餘區域，但不能超過窗口。謝謝。

UPDATE2：所以#content爲345px，#container是100％，其實還有一些其他的div的內容和bottomBar之間，我怎麼了#bottomBar剩下的高度？我想bottomBar只佔據剩餘的區域。

來源

2011-09-14 randomor

您希望#bottomBar的高度與背景圖片的高度相匹配嗎？如果是這樣的話，你需要'height：115px'。 – jmar777

你在問什麼？你想讓你的'＃content'達到100％的高度，'＃bottomBar'具有固定的高度嗎？你想讓它成爲另一種方式嗎？你想讓它變得流暢嗎？我無法理解你想達到的目標。 – Nightfirecat

bg圖像是我想要佔據窗口底部的radien，而不僅僅是115px。謝謝。 – randomor

height: 100%表示該元素將佔據其容器高度的100％。所以在這種情況下，#container元素的高度爲100％。

它與背景圖片無關。

設置height: 115px使#bottomBar相同的高度，它的背景圖片：

#bottomBar { height: 115px; margin:0 auto; width:100%; padding:0px; background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x; }

來源

2011-09-14 19:31:11 arnaud576875

感謝您的回答。我在更新中完成了自己的目標。 :) – randomor

試圖改變風格爲height：auto？

#bottomBar { height: auto; margin:0 auto; width:100%; padding:0px; background: #ffffff url('../images/bottomBG.jpg') 0 0 repeat-x; }

來源

2011-09-14 19:31:35 legendofawesomeness

對不起，我不是很清楚。但將其設置爲auto將確實只會使它成爲115px，這不是我想要的。我希望它佔據整個剩餘的窗口區域。 – randomor

只需設置的div高度明確，像高度：115px，或者寫一個服務器端腳本返回圖像的高度，是否值得這樣做。正如其他人所提到的，將高度（或寬度）設置爲X％表示容器的X％，而不是背景圖像的X％。

來源

2011-09-14 19:39:30 Lazarus

CSS度100％的高度問題

回答

相關問題