設置元素的最小高度等於文檔的可見部分

我有一個頁面，其中至少包含一個標題和一個容器div 我想爲容器div設置最小高度以覆蓋文檔（i不想將它固定到100％）設置元素的最小高度等於文檔的可見部分

所以我想我可以得到元素的高度和頂邊距和頂邊距原稿的高度

function getDocHeight() { 
    var D = document; 
    return Math.max(
     Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), 
     Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), 
     Math.max(D.body.clientHeight, D.documentElement.clientHeight) 
    ); 
} 

$(document).ready(function(e) { 

    var h = getDocHeight(); 
    var hedaer = $('.header').height(); 
    var c = $('.container').css('height') ; 
    var m = $('.container').css('padding-top') ; 
    var p = $('.container').css('margin-top') ; 
    var n = parseInt(h) - parseInt(c) - parseInt(m) - parseInt(p) - parseInt(hedaer) ; 
    var n = n + parseInt(c) ; 
    $('.content').css('min-height' , n+'px'); 

});

，但我總是或多或少有結束在我的容器內有很多其他元素，都有自己的高度和填充以及邊距和它只是讓我頭痛，想想他們

有沒有更簡單的方法來做到這一點？

來源

2012-09-22 max

也許你可以先把它設置爲100％？然後使用javascript查找該元素的實際高度，並將最小高度設置爲該值。然後將高度改回自動。 – Lian

你能發佈那個基本的html標記嗎？「容器」內部還是外部的「標題」？ – Bogdan

@spider它在容器之外，它是一個非常大的網站，我會盡力將它上傳到某個地方 – max

不完全確定你想要什麼，我的答案可能不適合你的瀏覽器，但顯示：box可能是解決方案（代碼爲webkit，以適應其他廠商前綴）：

<div class="container"> 
    <div class="header">blue</div> 
    <div class="content">red</div> 
</div>

和CSS

.container { 
    /*create a vertical box*/ 
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    /*ensure it takes of all available width and height in my fiddle :-D */ 
    position: fixed; 
    top:0; bottom: 0; left: 0; right: 0; 
} 
/*so that we see something*/ 
.header, .content {background: blue;margin: 20px;padding: 40px;} 
.content { 
    margin: 20px; 
    padding: 40px; 
    background: red; 
    /*this div will have all available height in his parent, 
    minus what's already taken, with the beauty of box-flex */ 
    -webkit-box-flex: 1; 
}

...仍然是一個很不穩定，不支持的規格，但我認爲這可能是值得mentionning。你可以看到它在行動（與鉻或狩獵）在這裏http://jsfiddle.net/S6F3S/1/

來源

2012-09-22 19:17:07

設置元素的最小高度等於文檔的可見部分

回答

相關問題