Установить div, чтобы динамически заполнить остальную часть высоты?

So. Мой код что-то вдоль линийУстановить div, чтобы динамически заполнить остальную часть высоты?

<html> 
<body> 
    <div id="header" style="width:100%;min-height:0;display:block;background-color:#000"> 
     <img src="header_image.svg" /> 
    </div> 
    <div id="content" style"display:block"> 
     Some content 
    </div> 
</body> 
</html>

У меня есть ГСВ в заголовке, что я установить так, чтобы она соответствовала ширине окна, а высота весы для сохранения SVG. Тогда у меня остальная часть страницы в другом div. Я бы хотел, чтобы страница не прокручивалась, и этот контент div заполняется, чтобы соответствовать остальной части окна. Проблема в том, что поскольку высота заголовка изменяется с шириной окна, я не могу установить содержание div в пикселях или процентах или что-то конкретное.

Как настроить высоту содержимого div для динамического изменения высоты заголовка?

Я не знаю Javascript или JQuery (я знаю, я знаю - должен), но в идеале высота содержимого div была бы задана как высота: (высота окна просмотра) - (высота заголовка), но я не знаю, как это сделать.

источник

2013-09-14 tuckerchapin

Для этого вам не нужно использовать сценарий. а также: Я рекомендую вам отделить свой стиль от разметки.

HTML

<div id="wrapper"> 
    <div id="header"> 
     <img src="header_image.svg" alt="the img is empty"/> 
    </div> 
    <div id="content">Some content</div> 
</div>

добавить к вашей CSS

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

/* this is the big trick*/ 
#wrapper:before { 
    content:''; 
    float: left; 
    height: 100%; 
} 
#wrapper { 
    height: 100%; 
    background-color: black; 
    color: white; 
} 
#header { 
    background-color:#000; 
} 
#content { 
    background-color: gray; 
} 
/* this is the big trick*/ 
#content:after { 
    content:''; 
    display: block; 
    clear: both; 
}

Working Fiddle

Испытано на: IE10, IE9, IE8, FF, Chrome.

не использовали абсолютное позиционирование
не использовал Script (раствор чистого CSS)
макет жидкости
кроссбраузерный

Пояснение: с псевдо элемента , Я создаю плавающий элемент (без содержимого или ширины, поэтому он невидим) , который имеет 100% высоты контейнера.

и с другим псевдоэлементом Я создаю div сразу после content div. (также без содержания, поэтому он также невидим), который имеет явный атрибут. поэтому он должен быть ниже плавающей, которую я создал ранее. делая content, чтобы пройти весь путь вниз.

источник

2013-09-14 22:54:11 avrahamcool

Черная магия, никогда не видел этого раньше :) Пожалуйста, объясните «большой трюк», мне любопытно, как это работает! – opatut

Хм ... Я думаю, что сделал все изменения, как есть, но, похоже, он не работает. Мне бы очень понравилась эта работа, это такое элегантное решение. Я тоже не знаю, как это работает, как @opatut. Сайт [tuckerchapin.com] (http://tuckerchapin.com) – tuckerchapin

Хорошо: поэтому я обновил свою скрипку, чтобы показать, что она действительно работает. – avrahamcool

Установить div, чтобы динамически заполнить остальную часть высоты?

ответ

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