使用100％高度的CSS實現簡單的行佈局

不好意思問這個問題，因爲這裏有很多CSS 100％高度問題（我讀過）。使用100％高度的CSS實現簡單的行佈局

我要使用DIV而不是TABLE來實現簡單的佈局。前3行是固定高度，第4行應擴展，第5行應爲固定大小（在底部）。

這是一個表，我怎麼能用DIV做到這一點？

這裏的表版本：

<html> 
<head> 

</head> 
<body> 

<table width="100%" height="100%" border="1"> 
    <tr height="20px"> 
     <td> 
      fixed height 20 
     </td> 
    </tr> 
    <tr height="50px"> 
     <td> 
      fixed height 50 
     </td> 
    </tr> 
    <tr height="100px"> 
     <td> 
      fixed height 100 
     </td> 
    </tr> 
    <tr> 
     <td> 
      auto expanding height 
     </td> 
    </tr> 
    <tr height="50px"> 
     <td> 
      fixed height 50 
     </td> 
    </tr> 
</table> 
</body> 
</html>

這裏是到目前爲止它不工作，我的最好的嘗試。

<html> 
<head> 
</head> 
<body> 

<div style="width: 100%; height: 100%; border-width: 2px; border-style: solid;"> 

    <div style="height: 20px; border-width: 2px; border-style: solid"> 
     fixed height 20 
    </div> 

    <div style="height: 50px; border-width: 2px; border-style: solid"> 
     fixed height 50 
    </div> 

    <div style="height: 100px; border-width: 2px; border-style: solid"> 
     fixed height 100 
    </div> 

    <div style="border-width: 2px; border-style: solid;"> 
     Auto expanding? 
    </div> 

    <div style="height: 50px; border-width: 2px; border-style: solid"> 
     fixed height 50 
    </div> 
</div> 
</body> 
</html>

來源

2012-01-11 sproketboy

您是否嘗試添加文檔類型？例如：<！DOCTYPE html> – 2012-01-11 15:07:06

你的例子似乎工作http://jsfiddle.net/zDLGM/你的意思是你想要第三行擴大，使整個事情填充頁面？ – lupos 2012-01-11 15:07:23

是的。就像桌子一樣。 – sproketboy 2012-01-11 15:14:51

Div的堆疊自動因此，所有你需要做的就是把他們的高度，你應該準備就緒試試這個：。

HTML

<div class="container"> 
    <div class="twenty"> 
     fixed height 20 
    </div> 
    <div class="fifty"> 
     fixed height 50 
    </div> 
    <div class="hundred"> 
     fixed height 100 
    </div> 
    <div class="auto"> 
     <div class="content"> 
      .... 
     </div> 
    </div> 
    <div class="fifty" style="border-bottom:none; border-top:1px solid"> 
     fixed height 50 
    </div> 
</div>

CSS

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

.container { 
    width:100%; 
    height:100%; 
} 

.twenty, .fifty, .hundred, .auto { 
    border-bottom:1px solid black; 
} 

.twenty { 
    height:20px; 
} 

.fifty { 
    height:50px; 
} 

.hundred { 
    height:100px; 
} 

.auto { 
    height:100%; 
    overflow:hidden; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    box-sizing:border-box; 
    margin:-120px 0; 
    padding:120px 0; 
} 

.content { 
    float:left; 
    overflow:auto; 
    height:100%; 
} 

.content{ 
    width:100%; 
}

編輯更新的答案以供將來參考。現在容器完全填充文檔的寬度和高度，並滾動頁面的可滾動部分，同時保留OP想要的部分。

完全視圖：http://jsfiddle.net/8abeU/show/ 小提琴：http://jsfiddle.net/8abeU

來源

2012-01-11 15:06:21

不會。它不會展開「自動」。 – sproketboy 2012-01-11 15:18:57

@DanHoward通過展開auto，你的意思是內容？或到頁面的結尾？ – 2012-01-11 15:19:36

沒錯。這個例子不起作用。它不像表格那樣展開。 – sproketboy 2012-01-11 15:23:18

快速的答案是用DIV替換你的表格和tr元素。然後用css class =「fixed-height-（任意大小）設置前三行」讓第四個div根據需要展開，最後一行有一個css class =「fixed-height-（無論大小）。同一類，其中高度相同，假設所有其他的造型是一樣的

來源

2012-01-11 14:49:25 Brian

我加入了迄今爲止的最佳嘗試。 – sproketboy 2012-01-11 14:56:15

@DanHoward：確保它們是DIV CLASSES和DIV ID，因爲DIVS將在頁面上多次使用。 – 2012-01-11 15:01:47

您需要家長的位置屬性設置爲絕對和汽車div的高度設置爲100％。 You can see it here.還要記住在HTML的頂部包含一個doctype聲明，這將有助於使它在整個瀏覽器中更加一致地呈現。

注：

這不會導致容器在垂直方向填滿整個窗口，但如果你沒有把邊框上，它會看起來好像它。

來源

2012-01-11 15:26:41

謝謝你。你鏈接到jsfiddle http://jsfiddle.net/vArfP/1/爲我工作。 :) – sproketboy 2012-01-11 16:12:52

真棒，我很高興我可以幫助。這是一個有趣的問題。 – 2012-01-11 16:24:24

使用100％高度的CSS實現簡單的行佈局

回答

相關問題