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

Список ответов на каверзные вопросы можно получить в FAQ-разделе форума.

№101-08-2006 12:46:49

#WER#
Участник
 
Группа: Members
Откуда: Санкт-Петербург
Зарегистрирован: 24-05-2005
Сообщений: 13
Веб-сайт

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

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

Выделить код

Код:

<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:

Отсутствует

 

№201-08-2006 13:16:28

Куллер
Участник
 
Группа: Members
Откуда: Санкт-Петербург
Зарегистрирован: 21-01-2005
Сообщений: 23
Веб-сайт

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

height: auto;

Отсутствует

 

№301-08-2006 13:56:33

#WER#
Участник
 
Группа: Members
Откуда: Санкт-Петербург
Зарегистрирован: 24-05-2005
Сообщений: 13
Веб-сайт

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

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

Отсутствует

 

№401-08-2006 13:56:42

Lynn
Кофеман
 
Группа: Members
Откуда: Россия
Зарегистрирован: 16-02-2005
Сообщений: 1721
Веб-сайт

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

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


Isn't it ironic... don't you think? — Alanis Morissette

Отсутствует

 

№501-08-2006 14:25:05

#WER#
Участник
 
Группа: Members
Откуда: Санкт-Петербург
Зарегистрирован: 24-05-2005
Сообщений: 13
Веб-сайт

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

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

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

Отсутствует

 

№601-08-2006 15:38:37

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

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

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

Выделить код

Код:

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

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

Отсутствует

 

№701-08-2006 16:09:37

#WER#
Участник
 
Группа: Members
Откуда: Санкт-Петербург
Зарегистрирован: 24-05-2005
Сообщений: 13
Веб-сайт

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

Выделить код

Код:

<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)

Отсутствует

 

№813-05-2010 15:53:43

devai
Участник
 
Группа: Members
Зарегистрирован: 13-05-2010
Сообщений: 1
UA: Firefox 3.6

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

Всем привет.
Хотел сперва сделать шаблон сайта. И нашел один примерчик и его чуть подправил. Но не могу футер вниз спустить.
Помогите плз.
Вот 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>

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]