CSS вопрос Компоновка столба жидкости оберточной содержание

Question

 
+-----------------------------------------------------+ 
|.....................................................| 
|..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 для этого, и если не самый лучший подход Javascript к нему, так как у меня были некоторые трудности с поддержкой кросс-браузера.

Answer 1

Попробуйте это.

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

Answer 2

CSS:

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

Answer 3

Это будет делать это для вас:

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.

Answer 4

После того, как я исследовал этот вопрос по существу, я пришел к выводу, что его просто невозможно сделать с помощью css совместимым способом (и я даже не рассматриваю IE6). Возможные решения включают либо javascript, либо таблицы. Я выбрал меньшее зло (таблицы), поскольку javascript привел к более сложному решению, и обработка события onResize может облагаться налогом в браузере в зависимости от сложности вызываемой функции. Некоторые проблемы с поисковой системой не важны, учитывая, что это приложение для интрасети. Единственная реальная проблема - доступность.

Я бы очень рад быть опровергнуто, хотя :)