Div обрезается в Firefox

Erica · 21.11.2007

Помогите пожалуйста!

Есть div, внутри него текст. Если текст длиннее, чем пользовательский экран, то div (в примере у него синий фон) имеет высоту экрана, а потом обрезается. Это в Firefox, в Explorer такой проблемы нет, div тянется столько, сколько тянется текст, до конца страницы. Как решить эту проблему в Firefox?

Вот файл css (styles.css):

body{
background: #ffffff;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
text-align: center;
}

#container {
margin: 0px auto;
height: 100%;
width: 800px;
position: relative;
text-align: center;
background: #0000dd;
}

#text {
padding-top: 20px;
margin-right: 10px;
text-align: right;
width: 530px;
vertical-scrollbars: auto;
}

Вот файл HTML:

<html>
<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id = "text">
<h1>title</h1>
<br />
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
<p>text...</p>
</div>
</div>
</body>
</html>

Спасибо.

Vovochka · 21.11.2007

Не знаю в чем прикол.
Убрал

Код:

height: 100%

Из #container и все стало шоколад.

Erica · 21.11.2007

Спасибо! Так действительно работает. Но как только я вставляю в #container еще какой-нибудь див, в котором задается height, тогда снова не работает. А совсем убрать height не получается, потому что в том диве фоном картинка, и в файлах, где текста мало, она обрезается.

Вот так:

<html>
<head>
<link href="css/style_second1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="right">
<div id = "text">
<h1>title</h1>
<br />
<p>text...</p>
<p>text...</p>
<p>text...</p>
...
<p>text...</p>
<p>text...</p>
<p>text...</p>
</div>
</div>
</div>
</body>
</html>

добавка в css:

#right {
background: #dddddd;
float: right;
height: 610px;
}

Если height: 610px; из #right убрать, все работает, а иначе - нет.

Vovochka · 22.11.2007

Итак, внимание! Поступаем круто:
Добовляем к #container

Код:

display: table;

Все сервисы Codeby

Поиск

Поиск

Div обрезается в Firefox

Erica

Vovochka

Erica

Vovochka