• 15 апреля стартует «Курс «SQL-injection Master» ©» от команды The Codeby

    За 3 месяца вы пройдете путь от начальных навыков работы с SQL-запросами к базам данных до продвинутых техник. Научитесь находить уязвимости связанные с базами данных, и внедрять произвольный SQL-код в уязвимые приложения.

    На последнюю неделю приходится экзамен, где нужно будет показать свои навыки, взломав ряд уязвимых учебных сайтов, и добыть флаги. Успешно сдавшие экзамен получат сертификат.

    Запись на курс до 25 апреля. Получить промодоступ ...

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

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

Erica

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

Есть 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

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

Erica

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

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

Обучение наступательной кибербезопасности в игровой форме. Начать игру!

Верх Низ