100% div высота

Hie Everyone100% div высота

Я проектирую веб-страницу с жидким макетом. Я хочу сохранить 100% ширину и высоту 100%. Проблема в том, что я не знаю, как сохранить divs «left» и «right» со 100% высотой внутри родительского div, «wrapper».

<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>

источник

2010-01-25 Q_Mlilo

Возможно, у вас будет больше шансов на ответ, если вы спросите об этом на партнерском сайте doctype.com – Spoike

Если я правильно понять, вы хотите, чтобы плавать дивы справа и слева внутри обертки DIV, но сохраняя полную высоту обертки Div в экране?

Если это так, правый и левый div, конечно, входят в оболочку, и вы используете {... float: left; position: relative;} и {... float: right; position: relative;}, чтобы поплавать их по бокам.

Теперь, поскольку вы разместили эти два div, которые являются частью содержимого вашего обертки div, сама оболочка может иметь нулевую высоту. Это происходит потому, что два div внутри «выплывают из него».Чтобы дать вашей обертка ту же высоту, как две дивы внутри есть, вы можете:

положить это в качестве третьего элемента DIV внутри вашей оболочки: <div style="clear: both;"></div> ИЛИ
положить любой элемент внутри оболочки после двух дивы (например, span) и присвоить ему свойство CSS для {... clear: both;}

Теперь вы «очистили поплавки», и ваша обертка имеет всю высоту двух разделов внутри.

ЕСЛИ НА ДРУГОЙ РУКЕ, вы хотите, чтобы весь ваш контент растягивался на всю высоту экрана всегда, независимо от того, что вы там вложили, вам нужно сделать некоторую магию CSS, и она становится слишком сложной объяснять, не видя свой код. Начать здесь: http://ryanfait.com/sticky-footer/

Надеюсь, что это поможет.

источник

2010-01-25 09:29:44 Tom

спасибо за ссылку, очень полезно! – Lucius

@ Lucius: добро пожаловать ... использовал это в течение долгого времени, никогда не было проблем. – Tom

попробуйте добавить

мин-высота: 100%; на ваш css, chk out this пример

источник

2010-01-25 08:23:01 ant

'min-height' не поддерживается всеми браузерами – poke

Ну, я дал ему пример .. он может видеть все там, как выполнить его цель, он вызывает рост вместо этого. он получит те же результаты – ant

@poke: IE6 по-прежнему считается релевантным, если не указано иное? – Anonymous

Чтобы иметь div со 100% высотой браузера, родитель должен также иметь высоту 100%. Попробуйте добавить следующие CSS:

html, body { height: 100%; margin: 0; padding: 0; }

источник

2010-01-25 08:23:41 poke

У меня уже есть этот код. мой основной div («контейнер») в порядке, он имеет 100% высоту. Мой заголовок имеет высоту 100 пикселей - я хочу, чтобы div «обертка» и его дочерние элементы («слева» и «справа») соответствовали оставшемуся экрану. –

Если вы все элементы в том же уровне, имеют ширину 100% и высоту, вы получите неожиданное поведение между браузерами. В примере, который вы указали, вы пытаетесь дать header и wrapper все пространство внутри родителя.

100% container 
+----------------------------+ 
| 100% header 100% wrapper | 
| +----------+ +-----------+ | 
| |   errr...?  | | 
| +----------+ +-----------+ | 
+----------------------------+

Как это возможно на самом деле? Есть несколько способов сделать это либо:

первый элемент получает все пространство или,
оба должны перекрываться или
они оба разделяют пространство

Так что вам нужно чтобы быть более конкретным при предоставлении процентов.

Кстати вы пробовали float ING свои элементы?

position: relative; // or absolute 
float: left;

источник

2010-01-25 08:28:36 Spoike

Я отредактировал, чтобы дать немного логики тому, чего я хочу достичь. –

100% div высота

ответ

Смежные вопросы