我怎樣才能使div 100％的瀏覽器窗口高度，但有頂部和底部邊距？

更具體地說，我有一個跨越瀏覽器窗口右側的右側邊欄。這部分沒有提出任何問題。但是，我希望它包含一個也是瀏覽器高度的100％的div，但具有頂部和底部邊距。如果內容不適合瀏覽器窗口高度，則該div內的內容將滾動。我無法讓它工作。這裏是我的代碼：我怎樣才能使div 100％的瀏覽器窗口高度，但有頂部和底部邊距？

HTML：

<div class="outerWrap"> 
    <div class="innerWrap"> 
     // stuff 
    </div> 
</div>

CSS：

.outerWrap { // this works 
    position: fixed; 
    right: 0; 
    top: 0; 
    height: 100%; 
    width: 277px; 
} 

.innerWrap { // this doesn't work 
    width: 277px; 
    margin: 152px 0px 10px 0px; 
    overflow-y: scroll; 
    overflow-x: hidden; 
    height: 100%; 
}

我如何能得到這個工作，所以我對內部的div頂部和底部邊緣？

來源

2012-07-10 Ajay Mohite

也許你應該做你所追求的圖？一個100％高度的div，但是頂部和底部邊距沒有多大意義。 – Kyle 2012-07-10 06:31:52

我希望外部div的高度爲用戶瀏覽器窗口大小的100％。我已經實現了這個沒有問題。我也想在這個外部div裏面有一個div，它有一個頂部和底部邊距，但是否則會填充剩下的所有高度，無論這可能是多少。 – 2012-07-10 06:35:31

使用 -

小提琴 - http://jsfiddle.net/EKm7p/

html, body{height: 100%;} 
.outerWrap {  
    height: 100%; 
    width: 277px; 
    border: 1px solid #f00; 
} 
.innerWrap { 
    margin: 152px 0px 10px 0px; 
    overflow-y: scroll; 
    width: 277px; 
    display: block; 
    position:absolute; 
    height:auto; 
    top:0; 
    left:0; 
    bottom:0; 
    background-color: green; 
}

來源

2012-07-10 06:41:36 Dipak

是的！絕對定位是關鍵。非常感謝！ – 2012-07-10 06:42:55

我怎樣才能使div 100％的瀏覽器窗口高度，但有頂部和底部邊距？

回答

相關問題