Как правильно растянуть по вертикали, div?

12
Varkolak
На сайте с 03.06.2005
Offline
174
22359

http://skypeland.ru/what_pay/ вот страница я ее растянул по вертикали, но она почему то всегда выходит за экран монитора, я так понимаю это из - за того что в #container (см. css) вставлена шапка в 150px и #content в 100%, в сумме получается #content (100% на весь монитор) + 150px шапка, как быть подскажите? А то как то не красиво смотрится css файл: http://skypeland.ru/style.css

html/css/js верстка и разработка сайтов на hostcms (хостцмс) - skype: varkolak1, тел: 89675012935, e-mail: anton.yurzanov@gmail.com
Ёжик В Тумане
На сайте с 26.07.2006
Offline
16
#1
Varkolak:
http://skypeland.ru/what_pay/ вот страница я ее растянул по вертикали, но она почему то всегда выходит за экран монитора, я так понимаю это из - за того что в #container (см. css) вставлена шапка в 150px и #content в 100%, в сумме получается #content (100% на весь монитор) + 150px шапка, как быть подскажите? А то как то не красиво смотрится css файл: http://skypeland.ru/style.css

Varkolak, просто у Вас установлено height:100%; , для блоков: #left_box, #right_box, #content, вот браузер и пытается растянуть их на 100%, и если mozilla делает 100% от размера body (читай размер экрана), то IE делает 100% от родительского контейнера, вот и получается, что к примеру #right_box высотой такой же, как и родительский #content, но поскольку перед ним стоит шапка высотой 150px, то и выходит такой отступ. Уберите 100% во всех перечисленных блоках и они "схлопнуться" :) и отступа не будет.

Ушел в себя, забыл про форум.
Вернусь ли? Не знаю... Если нужен, пишите в аську...
Varkolak
На сайте с 03.06.2005
Offline
174
#2

Ёжик В Тумане, дело в том если из #left_box, #right_box, #content убрать height:100%; то страница не будет растягиваться на весь экран, она будет растягиваться только под действием контента, а если в том или ином блоке будет больше контента, то графика в бекграунде не будет растягиваться до конца.

Может кто - нибудь еще знает что можно сделать?

Mmonger
На сайте с 01.12.2005
Offline
165
#3
Varkolak:
Ёжик В Тумане, дело в том если из #left_box, #right_box, #content убрать height:100%; то страница не будет растягиваться на весь экран, она будет растягиваться только под действием контента, а если в том или ином блоке будет больше контента, то графика в бекграунде не будет растягиваться до конца.
Может кто - нибудь еще знает что можно сделать?

Растяжение на 100% высоты можно сделать как показано ниже. Если ячейка с фоном меньше самого фона и он обрезается, на крайний случай можно распорки поставить из прозрачных гифов, хотя такой приём считается устаревшим.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style type="text/css">

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

html>body #all{height:auto;min-height:100%}

#all{position:relative;height:100%}

#footer{position:absolute;left:0px;bottom:0px;width:100%}

</style>

</head>

<body>

<div id="all">

<div id="footer"></div>

</div>

</body>

</html>

Всё будет хорошо, но мы приложим усилия!
Mmonger
На сайте с 01.12.2005
Offline
165
#4

Ещё один вариант, довольно непредсказуемый и с невалидным кодом - не указывать doctype и работать с высотой 100%.

lexwrlk
На сайте с 12.10.2005
Offline
130
#5

Varkolak, Один единственный простой вариант где вы сможете корректно контролировать высоту элементов (в Вашем случае и на сегодняшний день) - это таблицы, ибо только таблица заняла бы все оставшееся для нее место при атрибуте height="100%". Верстайте блоки таблицами там где невозможно что-то сделать Дивами и будет Вам счастье.

СДЛ СДЛу рознь (с) Форест Гамп
ТВЭЛ
На сайте с 29.09.2006
Offline
111
#6

Я бы сделал гораздо проще и без всяких таблиц.

Шапку (вместе с полосой меню) сделать position: absolute; и в коде пусть идет до контейнера, а у блока content (вложенного в container) сделать margin-top на высоту шапки.

Ye и вообще код бы я полностью другой сделал ;) слишком он усложнен.

Время не ждёт.
Varkolak
На сайте с 03.06.2005
Offline
174
#7

Спасибо всем, придется видимо так оставлять, насчет сложного, ну вот так сверстал, подругому не получилось, да и сложности то там в чем, я не понимаю?

Mmonger
На сайте с 01.12.2005
Offline
165
#8
lexwrlk:
Varkolak, Один единственный простой вариант где вы сможете корректно контролировать высоту элементов (в Вашем случае и на сегодняшний день) - это таблицы, ибо только таблица заняла бы все оставшееся для нее место при атрибуте height="100%". Верстайте блоки таблицами там где невозможно что-то сделать Дивами и будет Вам счастье.

У table нет атрибута height - и валидатор будет ругаться, и результат непредсказуем.

Таггу x_x
На сайте с 31.10.2005
Offline
445
#9

Я может глупость скажу, но что мешает создать див с высотой, нужной вам, но при этом в один пиксель шириной, например, и использовать его как растяжку? И пхайте его, куда надо по высоте. Правда это нужно тольок для осла, ибо FF понимает max-height

☠️☠️☠️
Varkolak
На сайте с 03.06.2005
Offline
174
#10

Tarry, понимаете в чем дело у всех мониторы разные, на моем 17 будет все ок, а вот на 19 и других будет смотреться убого.

12

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