Мне нравится левая рамка, чтобы расти, поскольку содержимое справа расширяло всю упаковку ... я имею в виду вертикальное масштабирование .... не горизонтальное!растущая коробка не работает
я уверен, что это только вопрос Css уместности где-то ... Вы можете помочь?
Старайтесь избегать поплавков, поплавков для изображений и текста. Люди часто используют поплавки, где абсолютное позиционирование гораздо более уместно.
В основном, что вы делаете, это добавление поля в правую панель, которая примерно такая же широкая, как ваша левая панель. Затем установите абсолютное положение левой панели сверху правой панели и установите высоту на 100%, чтобы она была такой же высокой, как и контейнер. контейнер будет иметь ту же высоту, что и контент.
Вот пример для вас:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body { width: 800px; margin: 0px auto; position: relative; }
#nav {
width: 200px; height: 100%;
position: absolute; left: 0px; top 0px;
background: #F00;
}
#content {
margin: 0px 0px 0px 200px;
heigth: 1000px;
background: #0F0;
}
</style>
</head>
<body>
<div id="nav">
</div>
<div id="content">
</div>
</body>
</html>
Вы, возможно, ищете «макет столба жидкости» (Google это), и вы можете добиться этого проще всего пути размещения вашей разметки что-то вроде этого:
<ul style="float:left; width:35%;">
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
<div style="float:left; width:65%;">
<p>Lots of content goes here</p>
</div>
По ширине всей страницы растет (например, путем изменения размера вашего браузера) растягивание «столбцов» в соответствии с их требованиями к ширине 35% и 65%. Вышеприведенная краткая примерная разметка, в которой не учитываются Internet Explorers, пометка/маржа по умолчанию для элементов или разметка поплавка, и в идеале любые стили на ваших двух столбцах будут заданы через «класс», т.е. <div class="column-a"> и все классы, определенные во внешнем файле CSS.
Сообщите мне, если вы хотите, чтобы я уточнил.
Редактировать: Итак, вы хотите, чтобы левая колонка имела свой фоновый цвет, простирающийся на дно, давая визуальный эффект «столбцов одинаковой высоты»? Если это так: this link is great и должен покрывать все, что вам нужно знать и попробовать.
Я имею в виду вертикальное масштабирование .... не горизонтально! – menardmam
глядя на страницу, я не могу понять, что вы просите. Какая коробка должна расти? – Greg