Div по всей высоте страницы без таблиц?

#WER# · №1

Захотел перевести сайт на слои. всё получилось кроме одной вещи. Никак не могу сделать полоску по всей высоте страницы. Вот набрасал примерный код проблемы.

Выделить код

Код:

<html>
<head>
<title>Untitled</title>
<style>
body,html,#tbl  {width:100%;height:100%;padding:0;margin:0}
#tbl {border-collapse:collapse;}
#polosa {width:20px;height:100%;border:1px solid red;float:left;}
</style>
</head>

<body>
<!--<table id="tbl"><tr id="tbl"><td id="tbl">-->
<div id="polosa"></div>
test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test
<!--</td></tr></table>-->
</body>
</html>

Я нашёл в чём причина - в понимание firefox'ом, что div {height:100%} это удлинение только на высоту клиентской области, но как решить эту задачу?
Я закоментировал таблицу с неё всё получается, но я хочу чтобы всё было на слоях :iron:

Куллер · №2

height: auto;

#WER# · №3

Аргумент auto устанавливает высоту исходя из содержимого элемента
Но у меня там бедет картинка фоном. как такого содержания вообще нет.

Lynn · №4

1. Сделайте её border'ом у таблицы.
2. А где тут блочная вёрстка?

#WER# · №5

1. Я был не прав заполнитель блока не картинка, а флэш.
2. я просто вывел проблему в отдельный блок.

Отредактировано #WER# (01-08-2006 15:33:32)

Al_H · №6

Нужно писать так

Выделить код

Код:

#polosa {min-height: 100%;}
* html #polosa {height: 100%;}

Обратите внимание, только для блока, html и body у Вас прописаны правильно.
Первая строчка - для Файрфокса, Оперы, Конкверора и других современных браузеров.
Вторая строчка - для непонятливого Експлорера.

#WER# · №7

Выделить код

Код:

<html>
<head>
<title></title>
<style>
body, html,#container  {width:100%;height:100%;padding:0;margin:0}
#container_in  {width:200px;margin-left:100px;border:1px solid red;}
#polosa {width:80px;min-height: 100%;border:1px solid black;float:left;}
html #polosa {height: 100%;}
</style>
</head>

<body>
<div id="container">
	<div id="polosa"></div>
	<div id="container_in">здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста</div>
</div>
</body>
</html>

Я не много изменил код.

Увы, но как раз ie воспринимает, то что я хочу сделать

Добавлено Втр 01 Авг 2006 16:33:42 :
Проблема решена. Правда с использование ява скрипт. Но пользователь этого не увидит

Выделить код

Код:

<html>
<head>
<title></title>
<style>
body, html,#container  {width:100%;height:100%;padding:0;margin:0}
#container_in  {width:200px;margin-left:100px;border:1px solid red;}
#polosa {width:80px;min-height: 100%;border:1px solid black;float:left;}
html #polosa {height: 100%;}
</style>
</head>

<body>
<div id="container">
	<div id="polosa"></div>
	<div id="container_in">здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста<br>здесь будет много теста</div>
</div>
<script>
polosa.style.height=document.body.scrollHeight;
</script>	
</body>
</html>

Отредактировано #WER# (01-08-2006 16:33:24)

devai · №8

Всем привет.
Хотел сперва сделать шаблон сайта. И нашел один примерчик и его чуть подправил. Но не могу футер вниз спустить.
Помогите плз.
Вот css:

Выделить код

Код:

html, body
{
    height: 100%;
    margin-top: 0;
    /* т.к. min-width не поддерживается IE, мы будем использовать скрипт написанный PVII */
    min-width:950px;
    /* Правило для решения бага прорисовки фона в IE, но т.к. оно создает промежуток под футером, мы добавим такое же правило в блок #footer */
    width:100%;
    /* Техника ложных колонок (faux-column), левая колонка */
    background:#fff url(left.gif) repeat-y left;
    /* Для IE */
    width: expression(document.body.clientWidth < 950? "950px": "100%");
    background-color: lime;
}

#outer_wrapper
{
    /* т.к. min-width не поддерживается IE, мы будем использовать скрипт написанный PVII */
    /*min-width:950px;*/
    /* Правило для решения бага прорисовки фона в IE, но т.к. оно создает промежуток под футером, мы добавим такое же правило в блок #footer */
    width:950px;
    /* Техника ложных колонок (faux-column), левая колонка */
    /*background:#fff url(left.gif) repeat-y left;*/
    /* Для IE */
    /*width: expression(document.body.clientWidth < 950? "950px": "950px");*/
    text-align: left;
    background-repeat: repeat-y;
    background-color: #FFFFFF;
    margin: 0 auto;
    height: 100%;
    background-color:#FFFF00;
    color:#000;
}

#wrapper
{
    /* Техника ложных колонок (faux-column), правая колонка */
    /*background:url(right.gif) repeat-y right*/
}

#header
{
    border:1px solid #b0b0b0;
    background:#b0b0b0;
    /* Задаем "определение позиции" для элемента и устраняем peek-a-boo баг в IE (v6 sp2) */
    width:100%;
    /* Предыдущее правило создает горизонтальную прокрутку в IE, избавимся от нее */
    margin:0 -1px
}

#container
{
    float:left;
    width:100%;
    /* IE удваивает внешние полоски (margins) у плавающих элементов, позаботимся об этой проблеме */
    display:inline;
    /* Тут мы расходимся во мнениях с Ryan Brill (автором статьи в ALA) */
    margin-left:-200px
}

#left
{
    float:left;
    width:150px;
    /* IE удваивает внешние полоски (margins) у плавающих элементов, позаботимся об этой проблеме */
    display:inline;
    margin-left:200px
}

#main
{
    /* ширина левой колонки #left (150px) + отрицательное поле (negative margin) у блока #container (200px) */
    margin-left:350px;
}

/* Примечание: если блок #sidebar будет короче чем блок #main, тогда можете удалить это правило */

#sidebar
{
    /* Для сохранения контента блока #sidebar справа от блока #main, если контента в #main меньше */
    padding-left:100%;
    /* Возвращаем блок #sidebar на место, который был вытеснен из вьюпорта из-за отступа */
    margin-left:-200px
}

#sidebar p
{
    /* Удостоверимся что IE (v6 sp2) отображает элемент (та же проблема что и с блоком #header, но решение другое) */
    position:relative
}

#footer
{
    /* См. блок #outer_wrapper */
    width:100%;
    /* Для очистки #container */
    clear:both;
    border-top:1px solid #b0b0b0;
    border-bottom:1px solid #b0b0b0;
    background:#b0b0b0;
}

/* Этот класс применяется к 2-м структурным хакам в разметке. Первый "бессмысленный" элемент
используется для очистки блока #left в NN6, а последний для очистки #container в NN4 */

.clearing
{
    height:0;
    clear:both
}

и html:

Выделить код

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Шаблон</title>
<link rel="stylesheet" href="css/style1.css" type="text/css" />
</head>
<body>
    <div id="outer_wrapper">
        <div id="wrapper">
            <div id="header">
                <h2>Header</h2>
                <p>...</p>
            </div>
            <!-- /header -->
            <div id="container">
            <div id="left">
                <h1>Left</h1>
                <ol>
                    <li>...</li>
                    <li>...</li>
                    <li>...</li>
                    <li>...</li>
                    <li>...</li>
                    <li>...</li>
                </ol>
            </div>
            <!-- /left -->
            <div id="main">
                <h1>Main</h1>
                <p>...</p>
            </div>
            <!-- /main -->
            <!-- This is for NN6 -->
            <div class="clearing">&nbsp;</div> 
            </div><!-- /container -->
            <!-- 
            <div id="sidebar">
                <h1>Sidebar</h1>
                <p>...</p>
            </div>
             -->
            <!-- /sidebar -->
            <!-- This is for NN4 -->
            <div class="clearing">&nbsp;</div>
            <div id="footer">
                <h2>Footer</h2>
                <p>...</p>
            </div><!-- /footer -->
        </div><!-- /wrapper -->
    </div><!-- /outer_wrapper -->
</body>
</html>

Полезная информация

№101-08-2006 12:46:49