высота div - HTML и CSS

RammFan · 07.12.2009, 16:19

Здравствуйте.

Есть таблица из двух столбцов, в левом столбце три дива, в правом - текст. (рисунок во вложении)

Задача - расположить три дива один под другим таким образом, чтобы у первого (div 1) и третьего (div 3) были фиксированные размеры, а второй div (div 2) был высотой в оставшуюся область столбца.

<table>
<tr>
<td class="leftline">
<div class="leftline_top"></div>
<div class="leftline_center"></div>
<div class="leftline_bottom"></div>
</td>
<td class="osntext"> Какой-то текст
</td>
</tr>
</table>

Такое вообще реально? Если да, то как это сделать?

Спасибо.

profet · 09.03.2010, 21:35

У меня почти такая же проблема.
Ни как не могу сделать так чтобы 2 див растягивался в зависемости от монитора

SkyM@n · 09.03.2010, 23:04

Код HTML:

<style type="text/css">
html, body {height: 100%}
#div1 {height:100px;width:100%}
#div2 {height:100%;width:100%}
#div3 {height:100px;width:100%}
div {border:1px dashed red}
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>

profet · 09.03.2010, 23:39

Цитата:

Сообщение от SkyM@n

Код HTML:

<style type="text/css">
html, body {height: 100%}
#div1 {height:100px;width:100%}
#div2 {height:100%;width:100%}
#div3 {height:100px;width:100%}
div {border:1px dashed red}
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>

в твоем примере получается что высотра будет иметь 100% + 200px, а это значит что будет скрол. а скрола не должно быть.
Было бы хорошо, если можно было бы сделать так как показано на рисунке.
http://programmersforum.ru/showthrea...d=1#post474454

SkyM@n · 10.03.2010, 00:35

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
      <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                border: 0;
            }

            html {
                height: 100%;
            }

            body {
                height: 100%;
                min-height: 100%;
            }

            #div0 {
                width:100%;
                height:100%;
                background-color:blue;
            }

            #div1 {
                position: relative;
                width:100%;
                height:50px;
                background-color:red;
            }

            #div2 {
                position: relative;
                width:100%;
                height:100px;
                background-color:yellow;
            }

            #div3 {
                width:100%;
                height:100%;
                margin-top: -150px;
                background-color:green;
            }

            #div4 {
                height:150px;
                width:100%;
            }

    </style>
  </head>

  <body>
    <div id="div0">
      <div id="div1">1</div>
      <div id="div2">2</div>
      <div id="div3">
          <div id="div4"></div>
          sdfsdfsd
      </div>
    </div>
  </body>

</html>

uberchel · 10.03.2010, 02:04

Что то типа этого ?

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
.cont {border:2px solid#000000;}
.leftline_top {background-color:#123123; padding:5px; height:20; width:100%;}
.leftline_center {background-color:#234234; border-top:1px solid#000000; padding:5px; height:auto; width:100%;}
.leftline_bottom {background-color:#345345; border-top:1px solid#000000; padding:5px; height:20; width:100%;}
.osntext {background-color:#444444; height:auto; border-left:1px solid#000000; padding:5px;}
</style>
</head>
<body>
<table class="cont" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" width="100">
<div class="leftline_top">0</div>
<div class="leftline_center">1<br>2<br>3<br>4<Br>5</div>
<div class="leftline_bottom">2</div>
</td>
<td class="osntext" valign="top" width="200">Какой-то текст</td>
</tr>
</table>
</body>
</html>

Magneto · 10.03.2010, 03:05

profet - отвечаю на Ваш вопрос

Код:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Название страницы</title>
<style type="text/css">
*{
	margin:0;
	padding:0;
	border:0}

html, body{
	height:100%}

#div-1{
	width:800px;
	min-height:100%;
	margin:0 auto;
	background:#ccc}

#div-2{
	height:100px;
	background:#999}

#div-3{
	width:800px;
	margin:0 auto;
	padding:0 0 100px;
	background:#ccc}

#div-4{
	width:800px;
	height:100px;
	margin:-100px auto 0;
	background:#222}
</style>
</head>
<body>
	<div id="div-1">
		<div id="div-2">
		</div>
			<div id="div-3">
			</div>
	</div>
		<div id="div-4">
		</div>
</body>
</html>

SkyM@n · 10.03.2010, 22:30

Magneto, скажите, какие отличия между моим постом и Вашим?

Magneto · 11.03.2010, 00:42

SkyM@n - если Вы отвечали на вопрос пользователя profet (ссылка на вопрос), то документ который сверстал я полностью соответствует поставленной задаче.

SkyM@n · 11.03.2010, 02:11

Цитата:

Сообщение от Magneto

SkyM@n - если Вы отвечали на вопрос пользователя profet (ссылка на вопрос), то документ который сверстал я полностью соответствует поставленной задаче.

Все так, только сравните Ваш ответ и мой. Разница есть?

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
растянуть div в другом div-e	slips	HTML и CSS	2	27.11.2009 15:43
Высота div-a в котором есть другой div	Antoha	HTML и CSS	2	07.08.2009 18:16
Позиционирование двух плавающих DIV внутри одного DIV	allocator	HTML и CSS	5	22.07.2009 13:48
Растягивающийся DIV и толкающий в низ следующий DIV	Суриков	HTML и CSS	6	29.08.2008 12:01
Высота taskbar'a	papa_serg	Общие вопросы Delphi	4	25.04.2008 16:44

09.03.2010, 21:35	#2
profet Регистрация: 09.03.2010 Сообщений: 5	У меня почти такая же проблема. Ни как не могу сделать так чтобы 2 див растягивался в зависемости от монитора

10.03.2010, 22:30	#8
SkyM@n Laravel/Vue expert Старожил Подтвердите свой е-майл Регистрация: 08.08.2007 Сообщений: 2,832	Magneto, скажите, какие отличия между моим постом и Вашим?

11.03.2010, 00:42	#9
Magneto Форумчанин Регистрация: 10.02.2008 Сообщений: 178	SkyM@n - если Вы отвечали на вопрос пользователя profet (ссылка на вопрос), то документ который сверстал я полностью соответствует поставленной задаче.