100％div高度

我在設計一個流體佈局的網頁。我想保持100％的寬度和100％的高度。問題是我不知道如何保持在他們的父div，「包裝」100％身高的div「左」和「右」。

<div id="container" style="width:100%; height:100%"> 
    <div id="header" style="width:100%; height:100px"> 
    </div> 

    <div id="wrapper" style="width:100%; height:(100% - 100px)"> 
      <div id="left" style="width:250px; height:(100% - 100px)"> 
      </div> 

      <div id="right" style="width:(100% - 250px); height:(100% - 100px)"> 
      </div>   
    </div>   
</div>

請幫忙。

從doctype.com回答

CSS

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

HTML

<body> 
<div id="container" style="width:100%; height:100%; position: absolute;"> 
    <div id="header" style="width:100%; height:100px;"> 
header 
    </div> 
    <div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;"> 
    <div id="left" style="width:250px; height:100%; float:left;"> 
    left 
    </div> 
    <div id="right" style="width: 250px; height:100%; float:right; "> 
    right 
    </div>   
    main content 
    </div>   
</div> 
</body>

來源

2010-01-25 Q_Mlilo

如果您在聯屬網站doctype.com上提問，您可能會有更好的回答機會 – Spoike 2010-01-25 08:21:45

如果我理解正確的話，你要浮動div的右側和左側的包裝DIV中，但保留包裝div的全高度屏幕？

如果是這樣，右邊和左邊div當然會進入包裝，並使用{... float：left; position：relative;}和{... float：right; position：relative;}將它們浮動到兩邊。

現在，因爲您已經將這兩個div包含在您的包裝div的內容中，所以包裝本身的高度可能爲零。這是因爲裏面的兩個div「浮出來」。爲了讓您的包裝相同高度的兩個div裏面有，你可以：

將這個作爲你的包裝內第三格：<div style="clear: both;"></div> 或
把任何元素的包裝裏面的兩個div後（像一個跨度），並給它一個CSS屬性{... clear：both;}

現在你已經「清除浮動」，你的包裝有兩個div的全部高度。

如果使用其他手勢，您希望您的所有內容都可以伸展到屏幕的整個高度，而不必考慮您在屏幕上放置的內容，那麼您需要做一些CSS魔術，它會變得太複雜沒有看到你的代碼解釋。從這裏開始：http://ryanfait.com/sticky-footer/

希望有所幫助。

來源

2010-01-25 09:29:44 Tom

感謝您的鏈接，非常有用！ – Lucius 2011-02-04 10:07:48

@Lucius：不客氣......長久以來一直使用它，從來沒有遇到過問題。 – Tom 2011-02-04 12:36:40

嘗試添加

最小高度：100％;到你的css，chk out this示例

來源

2010-01-25 08:23:01 ant

所有瀏覽器都不支持「min-height」 – poke 2010-01-25 08:24:15

那麼我給了他例子..他可以看到所有的東西完成他的目標，他會造成身高。他會得到相同的結果 – ant 2010-01-25 08:27:25

@poke：IE6仍然被認爲是相關的，除非另有規定？ – Anonymous 2010-01-25 08:31:35

要有100％瀏覽器高度的div，父級也需要100％的高度。嘗試添加下面的CSS：

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

來源

2010-01-25 08:23:41 poke

我已經得到了該代碼。我的主div（「容器」）沒問題，它有100％的高度。我的標題有100px的高度 - 我希望div「包裝器」及其子項（「左」和「右」）適合剩餘的屏幕視圖。 – 2010-01-25 08:31:51

如果您在同級別的所有元素是100％的寬度和高度，你會得到瀏覽器之間的意外行爲。通過你給出的例子，你試圖給父母的所有空間header和wrapper。

100% container 
+----------------------------+ 
| 100% header 100% wrapper | 
| +----------+ +-----------+ | 
| |   errr...?  | | 
| +----------+ +-----------+ | 
+----------------------------+

這應該是怎麼回事？有這樣做的幾種方法之一：

第一要素得到所有的空間，或者
都有重疊或
它們共用空間

所以你需要在給出百分比時更具體。

順便問一下你有沒有試過float ing你的元素？

position: relative; // or absolute 
float: left;

來源

2010-01-25 08:28:36 Spoike

我已經編輯了一些邏輯來達到我想達到的目的。 – 2010-01-25 08:36:24

回答

相關問題