Хорошо, я знаю, что подобные вопросы были заданы, но мои проблемы с поиском в Google и ответы на почти все вопросы о стековом потоке еще не помогли мне с этим. Мне нужно иметь контейнер Div, который содержит один или два столбца внутри него. Содержимое заполняется через CMS и может содержать или не содержать оба столбца.
Левый столбец будет навигационной рейкой, если он существует, а правый столбец будет основной копией тела. Таким образом, если не включена навигация, правый столбец должен занимать 100% ширины контейнера. Если навигационная рейка СУЩЕСТВУЕТ, то она должна съесть, скажем, 200 пикселей на левой стороне и переместить правый основной контент, чтобы занять оставшуюся ширину.
Проблема, с которой я столкнулся, заключается в том, чтобы высота пересекала 100% на левой навигационной рейке, если существует левая навигационная рейка.
Надеюсь, это имеет смысл.
Желаемый результат здесь: (поскольку я пока не могу размещать изображения)
http://www.freeimagehosting.net/uploads/60a01995ae.gif
и когда левая навигация не вставлена, здесь:
http://www.freeimagehosting.net/uploads/be5b69e9ec.gif
Я получил это, указав ширину справа, чтобы съесть оставшуюся ширину, оставшуюся от левого столбца 200px.
#container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
#left-col {
float: left;
width: 188px;
background-color: #d7d7d7;
padding-bottom: 500em;
margin-bottom: -500em;
}
#right-col {
float: left;
width: 722px;
margin-right: -1px; /* Thank you IE */
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}
<body>
<div id="container">
<div id="left-col">
<p>Left Rail Nav</p>
</div>
<div id="right-col">
<p>Primary content</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in rutrum est. Nulla nec tempor erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin sodales arcu quis neque semper porttitor quis vitae justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
Проблема возникает, когда я хочу сохранить ширину правого столбца равной 100%, если левая навигация не включена. Когда я добавляю ширину в 100% к содержимому справа, он опускает его вниз.
Изменение ширины правой колонки:
#right-col {
float: left;
width: 100%;
margin-right: -1px; /* Thank you IE */
background-color: red;
padding-bottom: 500em;
margin-bottom: -500em;
}
Вот так: http://www.freeimagehosting.net/uploads/fef22741e7.gif
Я должен верить, что есть чистый CSS-способ стилизации этого. Я знаю, что мог бы сделать это с помощью некоторого JavaScript, но я действительно хочу найти чистое решение. Это не возможно?
Можно подумать, что плавающие div и применение высоты 100% может сработать, но, очевидно, нет.