處理多個滾動列的最佳方式

我正在開發一個Web應用程序，該應用程序由一個包含四列可變高度內容的主體上方的頭部構成。設計神已經將它定爲高度固定，主要是因爲每個列可能會變得很長，所以（作爲設計師）他們想要帶有獨立滾動條的iframe。處理多個滾動列的最佳方式

四個（潛在的）滾動條已經夠糟糕了，但是如果整個頁面高度固定的高於瀏覽器窗口，那麼它最終會有五個！在這種情況下，「正常」解決方案當然是將整個頁面高度固定爲700像素，以便爲垂直擬合提供「最佳機會」，但我不想那麼做，因爲各種原因希望會很明顯。

所以我的問題是：什麼是最好的方式有一個身體容器填充可用（垂直空間）與每個列做同樣的事情？這是否可行？獎金問題：我可以可靠地使用CSS溢出屬性的列或我需要討厭的iframe？我有很多CSS經驗，但使用百分比尺寸（尤其是與像素尺寸相結合，因爲我需要的標題）沒有使用百分比尺寸。此外，這必須符合標準並向後兼容IE6。

TIA。

編輯：我不是在尋找一個CSS佈局的解決方案本身，我的問題是如何滿足需要爲每列是體用容器和滾動內的最大高度可能的，無固定身體的高度以像素爲單位 - 除非我絕對需要。

來源

2008-10-12 da5id

我敢肯定，這不正是你所需要的：Liquid 4 column layout with fixed height banner and footer

無內部框架，沒有Java腳本，每列自動填充可用高度。

來源

2008-10-14 16:23:38

格拉西亞斯MI AMIGO！ – Vinay 2012-12-03 18:46:14

你是在說這樣的事情嗎？

<div id="head"></div> 
<div id="body"> 
    <div id="col1"></div> 
    <div id="col2"></div> 
    <div id="col3"></div> 
    <div id="col4"></div> 
</div>

的CSS

#body { position: absolute; top: 60px /* height of the header */; bottom: 0px; width: 100%; } 
#body div { position: absolute; top:0; bottom:0 ;width: 25% }

這可能不工作在IE6中，你將不得不使用JavaScript：

window.onResize = function() { 
    // Calculate the height of the body, substract the height of the head and apply to all columns 
}

來源

2008-10-12 21:03:32 Dimitry

感謝德米特里，的確是有辦法來達到佈局噸，但它是固定高度和列滾動我很擔心。 – da5id 2008-10-12 21:20:00

在回答你的第二個問題，剛纔設置的高度CSS中的屬性來確保內容永遠不會比你所需要的大。你可以使用溢出-y：滾動（無效的CSS，但工程）強制在元素上的滾動條。

來源

2008-10-12 21:58:35

歡呼聲，但設置的高度呢？我首先想到的當然是100％，但我不知道那將可靠地工作。我可以看到我會需要做一些認真的測試，但希望別人已經走了有... – da5id 2008-10-12 22:16:19

我已經嘗試過DIV嵌套在各個元素中的各種排列，其中一個設置爲height:100%，另一個padding:60px，我無法找到一種讓內層有效高度爲100％-60px的方法。問題是百分比高度是指包含元素的height屬性，而不是高度減去邊距和填充。嘆。

我必須說，我希望CSS允許一個表達百分比，字體相對的，像素單元（的高度爲和（或差）爲

width: 12em - 2px; 
border: 1px solid #FED; /* Total width including border is 12em exactly */

或

width: 25% - 1em; 
margin: 1.25em 1em;

等等，就像TeX及其fil單元）。

我認爲您最好的選擇可能是使用JavaScript來檢查橫幅的高度，並從視口高度中減去它，然後適當設置包含列的框的高度。這樣，你會發現什麼尺寸的屏幕設計小夥子用，並在CSS文件中設置的硬連線默認值，以滿足他們的顯示器。

來源

2008-10-14 14:29:19 pdc

處理多個滾動列的最佳方式

回答

相關問題