CSS佈局液柱問題包裝內容

 
+-----------------------------------------------------+ 
|.....................................................| 
|..header height: 128px...............................| 
|.....................................................| 
+-----------------------------------------------------+ 
|.............|.......................................| 
|.sidebar.....|..Lorem ipsum..........................| 
|.width:......|.......................................| 
|.140px.......|..+---------------------------------------------+ 
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| 
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| 
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| 
|.............|..|xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx| 
|.............|..+---------------------------------------------+ 
|.............|.......................................| 
|.............|.......................................| 
|.............|.......................................| 
|.............|..frame should be as large as the......| 
|.............|..entire viewport or larger depending..| 
|.............|..on the context.......................| 
+-----------------------------------------------------+

我試圖創建一個2列布局（邊欄+含量的區域）具有報頭（以及可能的頁腳），其中側欄有一個固定的寬度和內容區域是流體。困難在於讓內容區域有效地包裝其內容，使內容不會溢出。CSS佈局液柱問題包裝內容

我想知道是否有一種CSS方式來做到這一點，如果不是最好的Javascript方法是什麼，因爲我有一些跨瀏覽器支持的困難。

來源

2010-09-17 SynBiotik

是您的ASCII繪圖試圖描繪期望的結果，或者是「xxxx'面積斷其容器的出你想的問題修理？ – 2010-09-17 11:38:48

它可能也很好顯示一些實際的代碼/內容，所以我們確切地知道問題是什麼。 – 2010-09-17 11:39:28

ASCII是破壞容器的div（不應該發生的）。 – SynBiotik 2010-09-17 12:58:53

試試這個。

#content { 
    margin-top: 128px; 
    maring-left: 140px; 
} 
#sidebar { 
    position: fixed; 
    left: 0; 
    top: 128px; 
    width: 140px; 
}

來源

2010-09-17 11:39:12 jcubic

位置：fixed在IE <7中不起作用 - 加上你真的不需要這個佈局，因爲float會比在正確的位置放置該側邊欄的能力更大 – Alex 2010-09-17 11:43:32

CSS：

#element { word-wrap: break-word; }

來源

2010-09-17 11:42:10 Alex

這會爲你做它：

HTML

<div id="header"></div> 
<div id="sidebar"></div> 
<div id="content"></div>

CSS

#header { 
    height: 128px; 
} 

#sidebar { 
    float: left; 
    width: 140px; 
} 

#content { 
    margin-left: 140px; 
}

你可以看到an example here。

來源

2010-09-17 13:04:05 Pat

This CSS與我使用的相似，因此會導致問題。 – SynBiotik 2010-09-17 14:33:16

什麼是轉義'＃content'元素的HTML/CSS？上面的CSS在我的幾個項目上工作得很好，所以你的轉義元素必須有一些獨特的東西。 – Pat 2010-09-17 15:48:15

任何寬度大於可用寬度的塊元素，考慮#content是瀏覽器的寬度...... – SynBiotik 2010-09-17 16:35:28

在對此事進行了大量研究之後，我斷定它不能以兼容的方式用css完成（而且我甚至沒有考慮過IE6）。可能的解決方案涉及JavaScript或表格。由於javascript導致了一個更復雜的解決方案，並且處理onResize事件可能會對瀏覽器產生影響，這取決於所調用函數的複雜性，所以我選擇了較小的邪惡（表格）。某些搜索引擎的擔憂並不重要，因爲它是Intranet應用程序。唯一真正的問題是可訪問性。

我會很高興，雖然被證明錯了:)

來源

2010-09-21 15:36:52 SynBiotik

CSS佈局液柱問題包裝內容

回答

相關問題