Сделать плавающий div иметь динамическую высоту 100%

Я использую php для динамического создания веб-страниц. Поэтому у меня есть вещи, более объективированные. Моя общая страница создает заголовок, основной и нижний колонтитулы. Содержимое размещено внутри моего основного тела.Сделать плавающий div иметь динамическую высоту 100%

Mainbody имеет минимальную высоту 600 пикселей.
Разделитель внутри основного корпуса для одной страницы выступает в качестве меню с левой стороны корпуса. Я хочу, чтобы этот div был на 100% от высоты основного.
В div (меню) находится плавающее влево, а остальная часть основного содержимого генерируется динамически php.

Что не работает:

Высота: 100%; (Он просто заканчивается тем, что высота содержимого у меня внутри меню, а не высота основного корпуса)
min-height: 600px; (Он просто остается 600px, даже когда mainbody становится больше)
Не играли с ним достаточно, но положение абсолютное, абсурдно большая высота и отрицательный индекс z, а главное переполнение ... не удавалось с небольшим количеством бит пытался.

Любые идеи? Я полностью открыт для каких-то странных манипуляций, пока это выглядит естественным.

Вот пример кода: jsfiddle.net/TButx

источник

2012-02-16 emilyk

Лоо в использовании JavaScript, чтобы получить высоту вашего текущего экрана и установить высоту текущего элемента к желаемым 100% – iGbanam

вы должны закодировать мы можем увидеть где-нибудь? Это решение проблемы намного проще решить, если мы сможем это увидеть. Если вы можете поместить файл в онлайн, вы можете попробовать его повторить с помощью JSFIddle http: // jsfiddle.net/ – azzy81

http://jsfiddle.net/TButx/ Там ya go! Я хочу, чтобы меню всегда было полной высотой основного. – emilyk

http://jsfiddle.net/TButx/56/

Решение состоит в том, чтобы дополнить в нижней части столбца и скрыть переполнение.

#html{width:400px; height:100%; margin-left:auto; margin-right:auto; background-color:yellow;} 
#mainbody {min-height:300px; height:100%; overflow: hidden;} 
#menu {width:100px; height:inherit; background-color:blue; float:left; padding-bottom: 700px;margin-bottom: -700px;} 
#content {height:100%; width:300px; background-color:red; float:right; padding-bottom: 500px;margin-bottom: -500px;} 
#clear {clear: both;} 

<div id="html"> 
<div id="mainbody"> 
    <div id="menu"></div> 
    <div id="content"></div> 
    <div id="clear"></div> 
</div> 
</div>

источник

2012-02-17 21:41:53

Там должна быть ошибка в коде. Как вы это описываете, все должно работать. Как здесь: http://jsfiddle.net/VxSA3/

HTML:

<div id="Mainbody"> 
    <div id="menu">menu content</div> 
    <p>some text in the main-body</p>   
</div>

CSS:

#Mainbody{height:600px;outline:1px solid green;} 
#menu{height:100%;outline:2px solid red;float:left;width:100px;}

источник

2012-02-16 22:20:12 Faust

http://imgur.com/HpSbT На этом изображении показан тот, который выглядит правильно (с использованием #mainbody min-height: 600px, а контент не делает его больше. #menu height: 600px;) http: // imgur .com/ZYR0h На этом вы можете видеть, что высота не распространяется на нижнюю часть тела, которая была расширена на размер текста. – emilyk

http://jsfiddle.net/TButx/ – emilyk

Общей проблемой является то, что ваш главный ДИВ тело не оборачивать вокруг плавающих элементов. Вы должны иметь div в нем с clear:both, и тело div будет растягиваться.

В качестве альтернативного метода вы можете использовать абсолютное положение для управления растяжением меню div.

Для основного DIV тела:

position:relative;

для левого плавали DIV (больше не слева не плавали в этом случае):

position:absolute; 
left:0px; 
bottom:0px; 
top:0px; 
width:...

источник

2012-02-16 22:23:46 mowwwalker

Сделать плавающий div иметь динамическую высоту 100%

ответ

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