CSS：可變高度標題的100％高度內容區域

我有一個可變高度標題，內容區域和頁腳的頁面。我希望內容區域始終填充視口，並根據需要垂直增長以適應內容。我發現很多使用固定高度標題的例子，但沒有一個高度未知的地方。CSS：可變高度標題的100％高度內容區域

任何解決方案都需要在IE 6,7和8，Firefox 3.x和Safari 4中工作。這可以用純CSS完成嗎？我必須放棄並訴諸基於表格的佈局嗎？

編輯：一個額外的要求是，我可以將元素放置在內容區域，並讓它們擴展到內容區域的全部高度（無論是視口高度 - 頁眉高度 - 頁腳高度還是大於此值）。我們希望顯示的一些內容具有自己的「標題」和「頁腳」部分，所以我真正想要的是可嵌套的解決方案。

2009-08-04 Annabelle

Dupe？ http://stackoverflow.com/questions/1211331/how-can-i-convert-this-table-based-layout-to-css – cletus 2009-08-04 00:32:58

停止支持IE6 – Jason 2009-08-04 00:43:01

這將是棘手的，沒有javascript完成。是否有理由讓內容區域佔據整個視區減去標題，即使沒有內容可以展開它？你究竟想要完成什麼？ – kmiyashiro 2009-08-04 02:54:17

確定這樣的最小高度CSS屬性不工作:)

我現在有一個實際的HTML文件，發揮各地，我相信我找到了一種方法。

.header-footer 
{ 
    height: 10%; 
    background-color: lightYellow; 
    display: table; 
    width: 100%; 
} 

.container 
{ 
    margin-left: auto; 
    margin-right: auto; 
    height: 80%; 
    width: 100%; 
    display: table; 
} 

.inner 
{ 
    background-color: lightPink; 
    height: 100%; 
}

我們使用display: table屬性來確保每個<div>下，並通過其他的坐好聽。

注意：您必須爲頁面上的每個元素設置height屬性。它不一定要達到我選擇的10％，但至少有一些東西。一旦內容被插入到大於高度值的元素中，它就會展開。

我創建兩個單獨的HTML頁面，爲您檢查，看看是否適合你：

希望這是你在找什麼。

感謝

來源

2009-08-05 00:12:40 mlevit

如果您希望標題更改大小，請使用相對高度。內容將已經垂直填充視口。

來源

2009-08-04 00:36:33

您可以嘗試在頁眉，內容和頁腳上使用min-height CSS屬性。

例如

.header-footer 
{ 
    min-height: 20%; 
} 

.content 
{ 
    min-height: 80%; 
}

請確保您同時設置<html>和<body>標籤有一個min-height: 100%這樣你可以填滿整個視口。

這應該允許頁面根據需要展開，但至少保持100％。

感謝

來源

2009-08-04 06:00:40 mlevit

-1

我花了一天使用此選項試驗和打這麼多奇怪的死角，我的專業意見，現在是這樣的：

你設計的，它錯了。

完全跳過可變高度標題。無論如何，這是一個愚蠢的想法。我做到了。爲我工作很好。現在，我是一個簡單的DOM蜘蛛網的自豪擁有者，沒有任何障礙導致我進入了計算器。

來源

2013-01-01 15:28:42 jchook

請參閱此琴：http://jsfiddle.net/qH6K3/

<div id="a"> 
    <div id="b1">BOX1</div> 
    <div id="b2">BOX2</div> 
</div> 

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

html,body{height:100%} 

#b1 { 
    background-color: red; 
    height: 45px; 
    width:100%; 
} 

#b2 { 
    background: blue; 
    height: 100%; 
    width: 100%; 
} 

#a { height: 100%; padding-bottom: 45px; }

來源

2014-01-21 07:44:55

請嘗試一下本作的CSS：http://jsfiddle.net/K64Mm/6/ 可變高度，含量100％的高度（甚至支持iframe的100％的高度），沒有多餘的滾動條，在觸摸設備上滾動。

<div class="wrapper"> 
    <div class="top topBar"> 

    </div> 
    <div class="content"> 
     <iframe scrolling="yes" src="http://www.zeffirino.com"></iframe> 
    </div> 
</div> 

html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; } 

.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 
.top { height: 45px; background-color: red; } 
.content { height: 100%; width: 100%; overflow: auto !important; } 
.content iframe { display: block; border: none; width: 100%; height: 100%; }

來源

2014-01-21 08:01:32

CSS：可變高度標題的100％高度內容區域

回答

相關問題