100%-я высота отделения
Hie все
Я разрабатываю веб-страницу с жидким расположением. Я хочу сохранить 100% шириной и 100% высотой. Проблема, я не знаю, как сохранить отделения "оставленными" и "прямо" с внутренней частью 100% высотой их родительское отделение, "обертка".
<div id="container" style="width:100%; height:100%">
<div id="header" style="width:100%; height:100px">
</div>
<div id="wrapper" style="width:100%; height:(100% - 100px)">
<div id="left" style="width:250px; height:(100% - 100px)">
</div>
<div id="right" style="width:(100% - 250px); height:(100% - 100px)">
</div>
</div>
</div>
Помогите.
Ответ из doctype.com
CSS
html, body{
height: 100%;
margin: 0;
padding: 0;
}
HTML
<body>
<div id="container" style="width:100%; height:100%; position: absolute;">
<div id="header" style="width:100%; height:100px;">
header
</div>
<div id="wrapper" style="width:100%; height:auto; position: absolute; top: 100px; bottom: 0;">
<div id="left" style="width:250px; height:100%; float:left;">
left
</div>
<div id="right" style="width: 250px; height:100%; float:right; ">
right
</div>
main content
</div>
</div>
</body>
4 ответа
Если я правильно понимаю правильно, вы хотите поплавлять девлам вправо и оставить внутри вашей обертки Div, но удерживая полную высоту DIV обертки на экране?
Если так, правильно и левая деврип Обелочка, а вы используете {... float: слева; Положение: относительно;} и {... float: справа; Положение: относительно;}, чтобы поплавить их по бокам.
Теперь, поскольку вы планируете эти два равных, которые являются частью содержания вашей обертки Div, сама обертка может иметь нулевую высоту. Это потому, что два девса внутри «плавают из него». Чтобы дать вашу оболочку на одну и ту же высоту, что и два равна внутри, вы можете либо:
- положить это как третий девлаж внутри вашей обертки:
<Стиль Div = «Очистить: оба;»>Или - Положите любой элемент внутри вашей обертки после двух девсов (как промежуток) и дайте ему свойство CSS {... Clear: оба;}
Теперь вы «очистили поплавку» и вашу обертку Имеет полную высоту двух девсов внутри.
Если с другой стороны, вы хотите, чтобы весь ваш контент растягивался на полную высоту экрана, всегда без учета того, что вы там поместили, вам нужно будет делать магию CSS, и он становится слишком сложным Объясните, не видя свой код. Начните здесь: http://ryanfait.com/sticky-footer/
Надеюсь, что поможет.
Если вы делаете все элементы на одном уровне, будьте на 100% ширина и высота, вы получите неожиданное поведение между браузерами. С приведенным вами примером вы пытаетесь дать заголовок и обертка все пространство внутри родителя.
100% container
+----------------------------+
| 100% header 100% wrapper |
| +----------+ +-----------+ |
| | errr...? | |
| +----------+ +-----------+ |
+----------------------------+
Как это должно быть возможно, действительно? Есть несколько способов этого делать:
- Первый элемент получает все пространство или
- оба должны перекрывать или
- они оба имеют пространство
, поэтому вам нужно быть более конкретным при предоставлении проценты.
Кстати, попробовал поплавок в ваших элементах?
position: relative; // or absolute
float: left;
Попробуйте добавить
мин высота: 100%; К вашим CSS, CHK OUT это Пример
, чтобы иметь Div с 100% ростом браузера, родитель должен иметь максимум 100%. Попробуйте добавить следующие CSS:
html, body { height: 100%; margin: 0; padding: 0; }