瀏覽器窗口和div的高度

我目前正在嘗試在頂部創建一個固定高度（100px）橫幅的網站，並且我希望其餘內容填充頁面的其餘部分。我擁有它，因此我的橫幅位於div中，其餘部分位於另一個div中，並且我希望頁面的其餘部分的高度小於100px（100％ - 100px）。顯然，當涉及到身高時，你不能混合使用％和px。但是，是否可以將變量定義爲wid高（100％）減去橫幅高度（100px），然後使用它來定義剩餘div的高度。瀏覽器窗口和div的高度

我是新來的CSS，HTML和幾乎不知道任何其他語言，所以請儘量保持答案簡單，因爲我是一個簡單的人！

來源

2012-09-27 David Ward

當你說你需要定義日是什麼意思高度爲100％-100像素？其中一個是最小的，另一個是最大的？ – thatidiotguy

我相信這與其他[問題] [1]是一樣的。 [1]：http://stackoverflow.com/questions/2434602/css-setting-width-height-as-percentage-minus-pixels – Ozzyberto

感謝您對您的所有響應。 Ozzyberto鏈接到另一個線程導致我將每個側面菜單和內容div設置爲'position：fixed'，並且具有以下設置'top：100px;底部：0;'。他們坐在我身體裏面，身高100％，身高100％。 –

<div style="height: 100px"> 
    Your banner 
</div> 
<div> 
    Body 
</div>

來源

2012-09-27 20:25:31 HelloWorld

高度是動態的，所以當你添加內容到你的「內容部分」時，持有它的對象的大小也是如此。

簡短的回答是，不要爲您的「內容部分」設置高度。

來源

2012-09-27 20:26:15

不幸的是，不設置高度不起作用。但是，我找到了一個解決方案（請參閱我最初的問題後的評論）。 –

您可以使用100％作爲您的內容div的高度 - 它將拉伸以佔據您的橫幅到屏幕底部的空間。

的一個重要部分是HTML和身體的高度設置爲100％：

HTML

<html> 
    <head> 
     <title>Foo</title> 
    </head> 

    <body> 
     <div id="banner"></div> 
     <div id="content"></div> 
    </body> 
</html>

CSS

#banner { 
    height: 100px; 
    background-color: #ccc; 
} 

#content { 
    height: 100%; 
    background-color: #000; 
} 

body { 
    height: 100%; 
} 

html { 
    height: 100%; 
}

觀看演示在這裏：http://jsfiddle.net/yHFjh/

來源

2012-09-27 20:29:35 Jim

你的內容是100％不是100％-100px –

啊，你是對的......看來我誤解了這個問題...... – Jim

創建一個html和height 100％的正文。將橫幅定位絕對。在橫幅下方添加內容div，並將其設置爲min-height爲100％。此內容將在橫幅後面，但至少100％。在橫幅廣告的高度padding-top的內容中添加div，以防止內容最終位於橫幅下方。

HTML：

<div id="banner"></div> 
<div id="content"> 
    <div id="main"> 
     Lorem Ipsum is simply dummy text.. 
    </div> 
</div>

CSS：

html, body { height: 100%; } 
#banner { position: absolute; height: 100px; width: 100%; background: green; } 
#content { min-height: 100%; background: yellow; } 
#main { padding-top: 100px; }

來源

2012-09-27 20:34:19

使用window.innerHeight/document.documentElement.clientHeight財產

<div id="banner">banner</div> 
<div id="content">content</div> 

<script> 
    if(navigator.userAgent.toLowerCase().indexOf("msie") > -1){ 
     document.getElementById("content").style.height = document.documentElement.clientHeight - document.getElementById("banner").offsetHeight + "px"; 
    } else { 
     document.getElementById("content").style.height = window.innerHeight - document.getElementById("banner").offsetHeight + "px"; 
    } 
</script>

來源

2012-09-27 20:35:24

瀏覽器窗口和div的高度

回答

相關問題