VPF::Странное поведение DIV'ов со 100% шириной в Опере.

Vitalik

Дата 5.8.2007, 22:03 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Координатор проекта
Сообщений: 653
Регистрация: 8.11.2004
Где: Ukraine, Kharkov

Репутация: нет
Всего: 12

Собственно возникла следующая проблема. Даже две.

Есть один главный DIV (root), у которого хотелось бы сделать высоту ровно 100% от экрана. Или по крайней мере, чтобы эта высота никогда эти 100% не превысила.
Есть два DIV'а внутри.
Первый DIV (header) это просто заголовочек (белый текст на темном фоне).
Второй DIV (content) это основное содержимое страницы. Хотелось бы, чтобы здесь появлялась полоса прокрутки при очень большом тексте (overflow: scroll).

Вот собственно и все.. Я попробовал сделать так:

Код


<html>
<head>
<style type="text/css">
body {
    font-family: Tahoma
}
.root {
    border: solid 1 blue;
    height: 90%; /* Кстати, хотелось бы 100% */
    width: 800;
}
.header {
    background-color: blue;
    color: white;
    padding: 2 2 2 10;
    height: 20;
    font-weight: bold;
}
.content {
    /*border: solid 1 red;*/ /* Для дебага */
    overflow: scroll;
    height: 100%;
    width: 100%;
    padding: 10; /* Вот тут то и не работает */
}
</style>
</head>
<body>
<div class='root'>
    <div class='header'>
        Это заголовок...
    </div>
    <div class='content'>
        Здесь много текста... и не только текста...
    </div>
</div>
</body>
</html>

Но, во-первых, если сделать height:100% у root'а, то этот самый root растягивается больше, чем на 100% (скорее всего из-за того, что у внутреннего content тоже height:100%).
Во-вторых, если установить padding:10; у блока content, то в браузере Opera его ширина безосновательно увеличивается на 20 пунктов и полоса прокрутки уже находится вне основного блока root. В Internet Explorer же все работает замечательно.

Можно ли как-то решить эти проблемы?.. user posted image

Добавлено через 7 минут и 29 секунд
Хотя если сделать overflow:auto, то в Опере этот глюк довольно симпатично начинает смотреться, как будто так и надо (полоса прокрутки вылазит четко на границе root'а), но в Internet Explorer становится гораздо "кривее" (полоса прокрутки как-то частично скрывается за правой границей root'а)..

japanes

Дата 6.8.2007, 11:30 (ссылка)

(голосов:1)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

Код


<style type="text/css">
html {height:100%;}
body {
    font-family: Tahoma;
    height:100%;
}
.root {
    background-color: green;
    min-height: 100%;//height: 100%;
    width: 800;
}
.header {
    background-color: blue;
    color: white;
    padding: 2 2 2 10;
    height: 20;
    font-weight: bold;
}
.content {
    /*border: solid 1 red;*/ /* Для дебага */
    overflow: scroll;
    height: 100%;
    padding: 10;
    margin:0px;
}
</style>

Vitalik

Дата 6.8.2007, 14:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Координатор проекта
Сообщений: 653
Регистрация: 8.11.2004
Где: Ukraine, Kharkov

Репутация: нет
Всего: 12

Большое спасибо, japanes!

Одна проблема решена. Как выяснилось из Вашего примера, нужно было только убрать width: 100% у блока content smile

Вторая проблема (которая под номером 1) пока остается нерешенной.. smile

WebDisaster

Дата 6.8.2007, 22:01 (ссылка)

(голосов:1)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Vitalik, посмотрите, не устроит ли такой вариант (не смог преодолеть тяги к "семантическим" сокращениям =):

Код


<?xml version="1.0" encoding="windows-1251"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Делаем блок 100% высоты с вертикальным скролом</title>
<style type="text/css">
html, body {
    padding: 0;
    height: 100%;
    width: 800px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}
.header {
    background-color: blue;
    color: white;
    height: 20px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;
}
.content {
    border: 1px solid #006;
    overflow: auto;
    position: absolute;
    top: 20px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
*html .header, .content {
    width: 800px;
    left: 50%; 
    margin-left: -400px; /* тут могут быть проблемы при ширине окна браузера меньше 800px; чтобы проблемы исключить, нужно удалить эту строку и вышележащую - тогда не будет выравнивания по центру окна в IE */
}
*html .content {
    padding-top: 30px; 
    height: 100%;  
    margin-top: -20px;
}
</style>
</head>

<body>
    <div class='header'>
        Это заголовок...
    </div>
    <div class='content'>
        Здесь много текста... и не только текста...  
    </div>
</body>
</html>

Это сообщение отредактировал(а) WebDisaster - 7.8.2007, 05:58

Vitalik

Дата 7.8.2007, 22:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Координатор проекта
Сообщений: 653
Регистрация: 8.11.2004
Где: Ukraine, Kharkov

Репутация: нет
Всего: 12

Цитата

(не смог преодолеть тяги к "семантическим" сокращениям =)

Что Вы имели в виду? smile

А по поводу решения: на сколько я понял вся соль в position:absolute; с последующим указанием конкретного положения блока (top, left, bottom, right) на экране?
Только в этом случае это получается работает правильно, да?..

WebDisaster

Дата 8.8.2007, 05:40 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Цитата(Vitalik @ 7.8.2007, 22:17

)

Что Вы имели в виду?

Отсутствие div.root при сохранении блоков, разделяющих контент по смыслу (div.header + div.content)

Цитата(Vitalik @ 7.8.2007, 22:17

)

вся соль в position:absolute

Ну да. Поскольку css (без JavaScript) не даёт возможности сказать браузеру, что высота .content равна 100% минус 20px (.header), тут был использован другой принцип размещения блоков - позиционирование. А к IE, как обычно, персональный подход =)

Vitalik

Дата 9.8.2007, 18:04 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Координатор проекта
Сообщений: 653
Регистрация: 8.11.2004
Где: Ukraine, Kharkov

Репутация: нет
Всего: 12

Цитата(WebDisaster @ 8.8.2007, 04:40

)

Отсутствие div.root при сохранении блоков, разделяющих контент по смыслу (div.header + div.content)

Ага, я тоже в последствии так и сделал smile

Спасибо

Цитата(WebDisaster @ 8.8.2007, 04:40

)

Угу, перестроил теперь сайт с таким подходом. В опере все отображается замечательно. Но вот когда загрузил IE, то оказалось, что он отображает блок content без полосы прокрутки.. Надо будет опять разбираться в чем дело.. smile

WebDisaster

Дата 9.8.2007, 19:20 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 406
Регистрация: 22.6.2007

Репутация: 17
Всего: 19

Если будут проблемы, покажите код своей страницы. На том фрагменте, который я давал, функционирование проверено в IE 5.5-6.0 -- всё работало нормально. Какую версию IE используете?

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »