我的CSS佈局變得超過100％的高度，在jsfiddle給出的例子

我搞亂了我的設計，它似乎不工作。我的CSS佈局變得超過100％的高度，在jsfiddle給出的例子

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="fader"></div> 
    <div id="body"> 
     <div id="viewer"></div> 

    </div> 
</div> 
<div id="footer" > a</div>

body,html 
{ 
height: 100%; 
background-color: #2c2c28; 
} 
#header 
{ 
background-color:red; 
    height:45px; 
} 
#footer 
{ 
    height:45px; 
    background-color:blue; 

} 
#wrapper 
{ 
height:100%; 
margin-bottom:-45px; 

} 
#viewer 
{ 
height:100%; 
background-color:yellow; overflow-y: hidden; 
} 
#body 
{ 
    background-color:pink; 
height:100%; 
    overflow-y: hidden; 
} 
#fader 
{ 
height:20px; 
}

黃色ID =體進一步比頁面向下延伸。我希望它停在頁腳。

來源

2012-10-19 Poul K. Sørensen

把您的頁腳您的包裝裏，像這樣：

<body>  
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="fader"></div> 
     <div id="body"> 
      <div id="viewer"></div>   
     </div> 
     <div id="footer" ></div> 
    </div> 
</body> 
</html>

這可防止身體伸過頁腳，因爲包裝和身體都設置爲100％的高度。

來源

2012-10-19 05:44:10 DaveyLaser

頁面仍然大於100％，用戶需要滾動。 –

http：// stackoverflow。com/q/90178/1519323可能會給你一些見解 – DaveyLaser

jsfiddle

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="fader"></div> 
    <div id="body"> 
     <div id="viewer"></div> 

    </div> 
    <div id="footer" > a</div> 
</div>

來源

2012-10-19 05:46:49

你的例子也有一個scroolbar，高度不是100％ –

我改變測試你可以只是c html部分..你需要調整高度 –

http：///jsfiddle.net/eTG4K/33/ –

我相信你正在尋找的粘頁腳效果，你必須有在用相同的包裝元素身高作爲頁腳將它壓在底部。你也必須在包裝的CSS中設置一些高度屬性。

<div id="wrapper"> 
    <div id="header"></div> 
    <div id="fader"></div> 
    <div id="body"> 
     <div id="viewer"></div> 

    </div> 
    <div class="push"></div> 
</div> 
<div id="footer" > a</div>

.push{ 
    height:45px; 
} 
#wrapper 
{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin-bottom:-45px;  
}

http://jsfiddle.net/eTG4K/41/

編輯：

你的問題是，你正在試圖給#body 100％的高度，因爲，自其所有祖先具有100％的高度，#body將有窗戶的高度，但#wrapper有其他孩子佔用的空間，這將導致它溢出。你可以使用利潤來解決這個問題，但我會考慮重新設計。

#wrapper 
{ 
    margin-bottom:-45px; 
} 
#body 
{ 
    margin-top:-65px; 
} 
#viewer 
{ 
    margin-top:65px; 
} 
/* add z-index to #fader and #header so they wont be covered by #body and #viewer */ 
#fader 
{ 
    position:relative; 
    z-index:999; 
} 
#header 
{ 
    position:relative; 
    z-index:999; 
}

http://jsfiddle.net/eTG4K/68/

來源

2012-10-19 05:51:40 Musa

您添加了height：auto。這意味着高度不是100％，id = body和id = viewer不是100％的高度。注意你的小提琴沒有顯示黃色 –

............ Live Demo ..................... 。

嗨，現在你可以使用fixed position作爲這樣

#footer { 
    background-color: blue; 
    bottom: 0; 
    height: 45px; 
    left: 0; 
    position: fixed; 
    right: 0; 
}

Live demo

來源

2012-10-19 05:53:25

注意你仍然需要滾動才能看到頁腳。 –

我的CSS佈局變得超過100％的高度，在jsfiddle給出的例子

回答

相關問題