CSS高度：填充可用空間。沒有固定的高度

所以我有以下結構CSS高度：填充可用空間。沒有固定的高度

<div id="container"> 
    <div id="head"></div> 
    <div id="body"></div> 
    <div id="foot"></div> 
</div>

我只使用插圖的IDS

所以這甚至不需要一個完整的頁面。

我想我的容器指定一個固定的大小...或相對大小，無所謂。讓參數爲300px高度。也overflow: hidden

我想擴大頭/腳以適應其內的內容，所以height: auto就足夠了。

我想要身體擴大以適應頭部和腳之間的剩餘空間。如果內容太大，請滾動（overflow: auto）。

height: 100%#body不起作用，因爲它然後獲得300像父親一樣的高度，並將其本身和頁腳的一部分推出父母。

頭和腳position: absolute不起作用，因爲通過將它們從文檔流中取出，某些內容#body被隱藏。爲了解決這個問題，我們可以使用padding-top/bottom，但是我們不能在#body上設置padding-top: xxpx/padding-bottom: xxpx，因爲我們不知道頭/腳的必要高度，因此它們爲什麼是height: auto。

編輯：

我嘗試了容器/頭/體/腳轉換成表，其中#body是height: 100%。這很有效，但如果內容太大，#body將不會滾動，而是整個表將展開以顯示所有內容。這不是所需的行爲，因爲我需要#body來滾動，而不是#content或它的父母。

有什麼建議嗎？

來源

2010-06-30 Dmitriy Likhten

你想設置身體的背景，以適應頭部和腳之間？ – galambalazs 2010-06-30 21:46:06

你可以通過將#container視爲＃body的背部，來「僞裝」你想要完成的任何事情的外觀。你也可以拋出一個額外的父元素，如果＃容器不能嘲笑。取決於你在做什麼，完全是。 – reisio 2010-06-30 22:41:10

@reisio：不能。問題是我想要腳在底部，頭部在頂部，身體要填充空間。我不介意使用#container作爲#body的背景，但問題在於製作頭部/腳部位置和正文滾動。它的內容比背景顏色更多。 – 2010-07-02 14:39:16

立即想到的唯一解決方案是display：table-cell，儘管遇到ie6 & ie7缺少支持的問題。也許提供良好的瀏覽器的規則，和一些JavaScript來計算ie的高度差異？

編輯：

這裏的另一種方法 - 使用jQuery來計算偏移量。請記住，這只是一個很快的&骯髒的嘗試 - 它需要經過瀏覽器測試，你會想要一些簡單的錯誤處理等，但它可能是一個起點。

不知道如果JavaScript是你想要去的方式，但我不能看到它在純CSS中完成。

我改變了ID，以類，這樣你可以有多個「fixedHeight固定高度」框：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 

<script> 

$(function() { 
    $(".fixedHeight").each(function() { 
    var head = $(this).find(".head"); 
    var body = $(this).find(".body"); 
    var foot = $(this).find(".foot"); 
    body.css("margin-top", head.height()).css("margin-bottom", foot.height());  
    }); 
}); 


</script> 

<style> 

.head { 
    background-color: red; 
    position: absolute; 
    top: 0; 
    width:100%; 
} 
.body { 
    background-color: blue; 
    color: white; 
    overflow: auto; 
    position:absolute; 
    top:0; 
    bottom:0; 
    width:100%; 
    margin:2.5em 0; 
} 
.foot { 
    background-color: green;  
    position: absolute; 
    bottom: 0; 
    width:100%; 
} 
.container { 
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%; 
    position: absolute; 
} 


</style> 

</head> 

<body> 

<div class="container fixedHeight"> 
    <div class="head"> 
    <h1>Header Content</h1> 
    </div> 
    <div class="body"> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    </div> 
    <div class="foot"> 
    <p>Footer Content</p> 
    </div> 
</div> 


</body> 
</html>

來源

2010-06-30 21:41:12 DHuntrods

ie7支持是必要的。什麼dos顯示：表格單元暗示？表格單元是否佔用了它父母的儘可能多的空間？ – 2010-07-01 00:31:13

此解決方案不起作用。爲了讓它正確顯示，我需要一個帶有'display：table'的父div，但是一個表似乎並不尊重height屬性。所以如果我把表格的「高度」設置爲300px，只要有必要，它就會展開。即使使用「最大高度」，它也不尊重它。我試着用'display：table-row'和body作爲'display：table-cell'和container作爲'display：table'，並且它的工作原理非常完美，直到我需要body來滾動它剛開始生長的時候。 – 2010-07-01 17:57:21

當然 - 桌子上的高度總是意味着最小高度！也許如果你爲你想要做的事情提供了一些額外的上下文和內容？我不確定這種精確的安排可以純粹在CSS中完成，但也許有其他方法可以解決問題？ – DHuntrods 2010-07-01 19:26:57

確定這樣繼承人一點研究，我撥通了排序的得到這個工作。

#head { 
    background-color: red; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#body { 
    background-color: blue; 
    color: white; 
    border: 0 none; 
    overflow: auto; 
    height: 100%; 
    padding-top: 2.5em; 
    padding-bottom: 2.5em; 
    box-sizing: border-box; 
    webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 
#foot { 
    background-color: green; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
#container { 
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%; 
    overflow: show; 
    position: absolute; 
}

這假設我可以計算的#head和#foot大小和總大小設置爲#body適當位置的填充。這會將身體的內容推出＃頭/＃腳所佔據的區域，因爲它們的絕對定位。這裏的問題在於，由於只有內容被移動，所以滾動條沒有被頂部/底部部分地切斷。

對於寬度，這不是一個真正的問題。

來源

2010-07-02 18:14:10

我最近遇到這個問題，我也不知道容器的總高度（就像德米特里的答案所假設的那樣）。假設#head和#foot的高度分別是50和25。以下是我如何解決它：

#body { 
    top: 25px; 
    bottom: 50px; 
    position: absolute; 
} 

#foot { 
    position: absolute; 
    bottom: 0; 
}

來源

2015-09-25 21:23:42 mightybyte

CSS高度：填充可用空間。沒有固定的高度

回答

相關問題