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

  • Автор темы Erica
  • Дата начала
Статус
Закрыто для дальнейших ответов.
E

Erica

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

Есть 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>
Спасибо.
 
V

Vovochka

#2
Не знаю в чем прикол.
Убрал
Код:
height: 100%
Из #container и все стало шоколад.
 
E

Erica

#3
Спасибо! Так действительно работает. Но как только я вставляю в #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 убрать, все работает, а иначе - нет. :)
 
V

Vovochka

#4
Итак, внимание! Поступаем круто:
Добовляем к #container
Код:
display: table;
 
Статус
Закрыто для дальнейших ответов.