如何使佈局100％高度

如何使一個簡單的佈局100％的高度（邊欄+內容）？如何使佈局100％高度

見我的源代碼：http://codepen.io/adilson/pen/kiHsd

顯然佈局似乎是高度的100％，但調整瀏覽器並打開「菜單項10」時，很顯然，事實並非如此。

另一個問題是列「側邊欄」邊框不會進入頁面的底部。

編輯： 我不希望有側邊欄上的滾動條，我想要做的就是讓佈局100％的高度，如果打開的菜單自動展開佈局。

這裏是什麼，我試圖做一個例子：http://www.keenthemes.com/preview/metronic/layout_blank_page.html

我只是不希望這種模式的頁眉和頁腳，但其餘的正是我想做的事情。

來源

2013-05-13 Web User

不是一個明確的問題。 – diEcho 2013-05-13 05:57:12

你打開代碼並在Codepen中預覽？在那裏你可以清楚地看到我上面有關.. 我想要使佈局100％的高度（邊欄+內容）.. – 2013-05-13 06:06:12

原因是您的滾動條高度超過100％。

您可以通過使用containers讓他們都在同一高度：

這裏的jsFiddle例子。

來源

2013-05-13 07:10:03

這是一個很好的理念......也許使用容器和「display：table」像其他社區中發佈的示例一樣：http://codepen.io/anon/pen/DivFj – 2013-05-13 23:08:16

這也可以工作。只要選擇你最喜歡的方式:) – 2013-05-14 08:00:40

您可以將溢出：自動添加到#sidebar。

#sidebar{overflow:auto;}

這會自動溢出事物。

來源

2013-05-13 06:28:43 Nitesh

溢出在邊欄中創建一個滾動條。有沒有其他的選擇？也許把所有的內容放在一個Wrapper中？ – 2013-05-13 06:37:40

有幾個解決方案。一種是滾動側面導航。另一個是限制子菜單的高度，然後滾動它們。

#sidebar ul li ul{max-height:230px;overflow:auto;}

您可能要直到你得到想要的樣子，你是後您的嵌套列表項的最大高度值試驗：對於這一點，作如下更新你的CSS。

爲了使您的側邊欄滾動的時候，屏幕尺寸減小添加以下，

#sidebar {left: 0;bottom:0;top:0;width: 255px; background: #111; border-right:#000 solid 3px;overflow-y:auto;}

添加頂部和底部位置將確保您的側邊欄留在地方，佔據了原稿的高度的100％。

希望這會有幫助

來源

2013-05-13 07:51:17 lukeocom

lukeocom，我想避免邊欄的滾動。我添加了一個在初始消息中會做什麼的例子。 – 2013-05-13 11:24:09

設計之間的差異在於您試圖使用100％的相對高度。您提供的示例使用的固定高度爲947px ...您可能希望將以下內容添加到您的css中。 #container {height：800px; background-color：＃555; width：100％;} body {margin：0; padding：0;} – lukeocom 2013-05-14 00:33:35

然後添加一個ID爲'container'的div，圍繞邊欄和內容div的。 – lukeocom 2013-05-14 00:34:11

如何使佈局100％高度

回答

相關問題