Форум Сайтостроение Веб-строительство

Вопрос по блочной верстке

glab
На сайте с 10.09.2008
Offline
42
glab
844

Здравствуйте. Всегда верстал таблицами, а тут вдруг решил использовать блоки для одного проекта и столкнулся с проблемой. Чтобы было понятнее привожу иллюстрацию:

Есть див #header высотой 100 пикселей.

Вопрос как сделать чтобы див #content заполнял всю оставшуюся высоту?

Естественно скроллбаров быть не должно.

Заранее благодарю за ответ.

T3
На сайте с 21.12.2008
Offline
27
tugrik37
#1

<html>

<head>

<link rel="stylesheet" href="style.css" type="text/css" media="screen">

</head>

<body>

<div id="content">

<div id="header">

</div>

</div>

</body>

</html>

* {

border: 0;

margin: 0;

padding: 0;

}

html, body {

width: 100%;

height: 100%;

}

#content {

position: relative;

background: #27363E;

width: auto;

margin: 0 auto;

min-height: 100%;

}

#header {

height: 100px;

background: #0A4814;

}

tugrik37 добавил 31.10.2009 в 00:55

по условию как должно быть??

так:

<div id="content">

<div id="header">

</div>

</div>

или так:

<div id="header">

</div>

<div id="content">

</div>

??

glab
На сайте с 10.09.2008
Offline
42
glab
#2
или так:
<div id="header">
</div>
<div id="content">
</div>

этот вариант. тоесть они не вложены друг в друга.

T3
На сайте с 21.12.2008
Offline
27
tugrik37
#3

удалено не то написал)))

Евгения Бахвалова
На сайте с 26.05.2008
Offline
83
Евгения Бахвалова
#4
glab:
тоесть они не вложены друг в друга

Тогда так 

<html>

<head>

<style>

* {

border:0;

margin:0;

padding:0;

}

body {

width:100%;

height:100%;

}

#content {

margin:0 auto;

background:#27363E;

width:auto;

min-height:100%;

height :auto !important;

height :100%;

}

#header {

position:absolute;

width:100%;

height:100px;

background:#0A4814;

z-index:1;

}

.text {

padding-top:100px;

}

</style>

</head>



<body>



<div id="header"></div>

<div id="content"><div class="text">ffffffffff</div></div>



</body>

</html>
Еня Беарт (http://www.beart.ru) Не ждите чуда - чудите сами.
glab
На сайте с 10.09.2008
Offline
42
glab
#5

Евгения Бахвалова, ваше решение уже близко к тому, что мне нужно. Как я понял вы "прячете" часть блока #content под блок #header. Однако я забыл упомянуть, что блок #header ещё плюс ко всему этому ещё имеет прозрачность, т.е. под ним виден фон блока #content, что не хорошо. Если ли какие-нибудь идеи на этот счёт?

GDR2
На сайте с 27.09.2008
Offline
40
GDR2
#6

На кроссбраузерность не проверял, возможности не было... 

* { margin:0; padding:0;}

html, body { height:100%;}

.wrap {position:relative; overflow: hidden;  min-height:100%}

.header { position: relative; height:100px;}

.content { position: relative; margin-bottom:-1000em; padding-bottom:1000em}


<div class="wrap">

	<div class="header"></div>

	<div class="content"></div>

</div>
Динар.рф (http://xn--80ahmuq.xn--p1ai/) | Верстка макетов (/ru/forum/505916)
glab
На сайте с 10.09.2008
Offline
42
glab
#7

GDR2, спасибо работает, но только в Firefox, IE8 и Opera.

В IE6,7 не хочет. Пытаюсь адаптировать.

glab добавил 31.10.2009 в 15:36

Всё, заработало! Спасибо всем, а особенно GDR2.

Gmp
На сайте с 12.10.2008
Offline
83
Gmp
#8

При указании полного доктайпа ни одна байда не пашет (в основном в опере) :(

GDR2
На сайте с 27.09.2008
Offline
40
GDR2
#9

ну опера это отдельная песня как и ослик 🚬

Avenger
На сайте с 22.07.2007
Offline
47
Avenger
#10
GDR2:
ну опера это отдельная песня как и ослик 🚬

бред

_________

С уважением, Андрей Головнев (http://golovnev.by/)

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий