Div內div（100％高度），並保持頁腳底部 - JSFiddle

我創建了下面的jsfiddle重新創建我的問題，我希望.dashboard & .inner儀表板始終保持100％的高度，並保持頁腳總是在底部。Div內div（100％高度），並保持頁腳底部 - JSFiddle

HTML

<div id="wrap"> 
    <body> 
     <div class="dashboard"> 
      <div class="inner-dashboard"> 

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

CSS

html,body{ 
    height:100%; 
} 
#wrap { 
    min-height: 100%; 
    height: auto; 
    margin: 0 auto -60px; 
    padding: 0 0 60px; 
} 
#footer { 
    height: 60px; 
    background-color: blue; 
} 
.dashboard{ 
    width: 100%; 
    height: auto; 
    min-height: 100%; 
    position: absolute; 
    padding-bottom: -60px; 
    background-color:green; 
} 
.inner-dashboard{ 
    height:100%; 
    padding-bottom: -60px; 
    background-color:red; 
}

來源

2014-01-26 darkcode

下面是一個例子：jsFiddle

我不得不修改HTML來對儀表板和頁腳一個共同的容器。

<div id="wrap"> 

     <div class="dashboard"> 
      <div class="inner-dashboard"> 

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

我把一個表中的wrapper（公共容器），並在表單元中的其它元件。因此，即使您的儀表板高度爲200％，頁腳仍處於底部。

html,body{ 
    height:100%; 
} 
#wrap { 
position:absolute; 
display:table; 
height:100%; 
width:95%; 
padding-bottom:60px; 
} 

.dashboard{ 
    width: 95%; 
    height: 200%; 
    display:table; 
    border:5px solid green; 
} 
.inner-dashboard{ 
width: 95%; 
    height: 100%; 
    display:table-cell; 
    border:5px solid red; 
} 
#footer {  
    display:table; 
    height: 60px; 
    width:95%; 
    border:5px solid blue; 
    bottom:-10px; 
}

是嗎？！

來源

2014-01-26 17:08:08 audre7

我已經添加修改你的CSS，並添加position屬性

我希望修訂解決您的問題：[更新] http://jsfiddle.net/saurabhsharma/rv7xN/3/

來源

2014-01-26 12:42:26

。內部儀表板也應該具有100％的高度。此外，在您的解決方案中，頁腳底部不會顯示頁腳。 – darkcode

我已經更新了上面的修訂版本，頁腳處於絕對底部，它在jsfiddle中出現在某種程度上，但實際上它會出現在絕對底部。如果您發現它很有價值，請接受答案。 –

如果頁面的位置在儀表板長大超過100％時是絕對的，那麼頁腳不在頁面的末尾。 – darkcode

Div內div（100％高度），並保持頁腳底部 - JSFiddle

回答

相關問題