Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Странное поведение DIV'ов со 100% шириной в Опере.

Автор: Vitalik 5.8.2007, 22:03

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

Есть один главный 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

Код


<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

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

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

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

Автор: WebDisaster 6.8.2007, 22:01

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>

Автор: Vitalik 7.8.2007, 22:17

Цитата

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

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

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

Автор: WebDisaster 8.8.2007, 05:40

Цитата(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

Цитата(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

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