CSS大約兩欄佈局

我從來沒有想過，寫一個簡單的兩個欄佈局是如此複雜使用CSS ....哈哈CSS大約兩欄佈局

我想要做的是以下幾點：

當內容div的高度超過屏幕大小的高度，滾動條僅存在於內容div中。該用戶只能滾動內容股利，但側邊欄保持靜態
兩列應具有相同的高度

我的佈局：

< -------- ------- container ------------------->

< ----------------- --header ------------------>

< ----- sidebar -------> < --------- content --->

< --------------- ---頁腳------------------->

< ---容器結束--------------- ---------->

這裏是我的CSS文件： http://137.189.145.40/c2dm/css/main.css

謝謝/

來源

2011-10-09 Bear

我不知道你在第一點想說什麼。「滾動條只存在於內容div中，但不是同一個網站。」我建議你在jsfiddle.com的頁面上放一些代碼來說明你想要的。 –

抱歉，錯字。我的意思是，用戶只能滾動內容部分，而保持左側邊欄靜態 – Bear

是否整個佈局應該是「屏幕」（視口）的大小？ – thirtydot

#WorldContainer 
{ 
    width: 1000px; 
    margin: auto; 
    overflow: hidden; 
} 

.ContentColumn 
{ 
    float: left; 
    width: 500px; 
    overflow: auto; 
} 

<div id="WorldContainer"> 
    <div class="ContentColumn"> 
     Content goes here! 
    </div> 
    <div class="ContentColumn"> 
     Content goes here! 
    </div> 
</div>

這會給你一個頁面，其中主div不能滾動，但兩個div列可以。他們將並肩。你的問題並不完全清楚，所以希望這是你以後的樣子。

編輯：爲響應您顯示示例網站。

你的問題很簡單。

您的所有div的高度規則爲height: 100%; 當您使用百分比高度時，您將它作爲其所在容器的百分比，即其父容器。 它不是整個窗口的百分比高度。

每個容器都指定一個百分比高度，因此結果爲0的高度。給你的最外面的div一個固定的高度，問題將被解決。

附加編輯：

如果您關心確保最外面的div總是一直延伸到窗口的底部，那麼這是使用絕對定位的CSS解決方案：

#OutermostDiv 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
}

使用這種方法仍即使外部div沒有硬編碼高度，也會導致計算的高度。這將允許您在內部div上使用百分比高度，並維護從可見窗口的頂部延伸到底部的外部div。

來源

2011-10-09 02:33:40

@熊我發佈了答案給你的問題。 –

非常感謝。但我想最大限度地提高網站的高度，使網站的高度=瀏覽器的高度... 而互聯網上的教程告訴我，我應該設置100％的高度來做到這一點 – Bear

@熊你的教程是錯誤的。這不會得到你以後的。另外，它會造成你現在所處的困境。你沒有一個高的內部divs來計算，所以他們最終的高度爲0 –

你必須要將容器元素設置爲overflow:hidden; ，並將您的內容div分配給overflow:scroll;（並且可能需要overflow-x:hidden;才能隱藏水平滾動條）。這個問題是，如果你的側邊欄&的內容將是相同的高度，那麼你將不得不有兩個滾動條 - 一個用於內容，一個用於側邊欄。

你也許可以通過在側邊欄&內容上使用另一個容器元素來解決這個問題，並且可以在其上設置overflow: scrollbar; overflox-x:hidden;而不是邊欄/內容。

來源

2011-10-09 02:26:57

如果您遇到與float有關的問題，也可以使用display:table和display:table-cell創建列。這裏的CSS：

#container 
{ 
width:960px; 
margin:0; 
padding:0; 
display:table; 
} 
#sidebar 
{ 
width:300px; 
display:table-cell; 
} 
#content 
{ 
width:660px; 
display:table-cell; 
}

和HTML是：

<div id="container"> 

<div id="sidebar"> 
<!-- Sidebar Content Here --> 
</div> 

<div id="content"> 
<!-- Content Here --> 
</div> 

</div>

希望這能解決你的問題。但display:table在某些舊瀏覽器中不起作用。

來源

2011-10-09 07:39:45

CSS大約兩欄佈局

回答

相關問題