邊欄不會頁腳

（對不起，我的英語）邊欄不會頁腳

大家好，

我想重拍我的學校內聯網。當我試圖做一個側邊欄，它是不會頁腳

我想在這樣的網站地圖：

____________________________ 
    |   top_bar   | 
    ____________________________ 
    | S |     | 
    | I |     | 
    | D |     | 
    | E |     | 
    | B | content_wrapper | 
    | A |     | 
    | R |     | 
    |  |     | 
    |  |     | 
    |  |     | 
    |  |     | 
    ____________________________ 
    |   footer   | 
    ____________________________

在你將要genrated小部件的內容包裝動作使用PHP，但稍後。當我放置了很多小部件時，側邊欄在最後一個菜單塊後停止。我希望當你有很多小部件時，側邊欄在頂部欄和頁腳之間動態調整大小。

這是我的代碼：

https://www.dropbox.com/s/r6opwlekb6ip1qi/school_intra.zip?dl=0

謝謝!!

來源

2014-10-06 blakyris

請不要附上Dropbox的文件，而不是創建一個小提琴 – 2014-10-06 08:47:46

[仿列（http://alistapart.com/article/fauxcolumns）。 – 2014-10-06 08:57:41

你可以使用jquery獲取'content''高度'並將其交給'sidebar' – 2014-10-06 09:14:22

最簡單的方法是使用display table和display table-cell（在IE8以及其他所有瀏覽器中支持）。

包裹欄圍繞一個div和主要內容：

<div class="main"> 
     <div class="sidebar"> 
       <!-- etc... --> 
     </div> 
     <div class="content-wrapper"> 
       <!-- etc... --> 
     </div> 
</div>

然後添加這個CSS原規定執行後（或修改原有規則，這些新規則）：

.main { 
    width:100%; 
    display:table; 
} 
.content-wrapper,.sidebar { 
    float:none; 
    display:table-cell; 
    vertical-align:top; 
}

通過驗證器運行你的html，因爲當你的意思是'head'並且你的頁腳在body元素之外也是不允許的時候，你在文檔的頭部有一個頭元素。如果你支持IE8，你需要html5 shiv來使用你正在使用的新html5元素。

你的CSS有點奇怪，因爲你的樣式只適用於大於1024像素的顯示，然後樣式小於768像素，但在這些範圍之間沒有任何內容？

通常你會有一個基礎的CSS所有設備，然後只需在必要時（最好在同一個CSS文件，而不是多個CSS文件）與媒體查詢修改它。

來源

2014-10-06 09:08:07

感謝它的工作！ – blakyris 2014-10-17 11:56:52

根據您的要求，您必須玩CSS的位置。

http://jsfiddle.net/amith009/eqxdzfz4/2/

來源

2014-10-06 09:25:51 user45205

http://jsfiddle.net/amith009/eqxdzfz4/ – user45205 2014-10-06 09:26:42

邊欄不會頁腳

回答

相關問題