Как сделать так, чтобы DIV занял все свободное место?

hooey_ru · October 6, 2008

Смотрите, страница состоит из трех дивов с абсолютным позиционированием:

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

Дело в том, что в этом третьем диве находится картинка. Отчаявшись выровнять ее по центру, я даже поставил третьему диву атрибут align=center, но и это не помогло! По-моему это из за того, что третий див автоматически получает такую же ширину, как сама картинка.

DjTarik · October 6, 2008

Дайте кусок вашего кода...

P.S. Вроде как див растягивается по ширине экрана, если ему не прописывать длину...

hooey_ru · October 6, 2008

Таблица стилей:

div.title {padding: 1em; position: absolute; top:0; margin-right: 15em; height: 7em; }
div.main {padding: 1em; margin-right: 15em; margin-top: 7em; position: absolute; left: 0;}
div.menu {padding: 1em; position: absolute; width: 15em; right: 0;}

div.mainPageImg {margin: auto; } /* увидел такой совет, когда искал в интернете */

Страница:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <link rel="stylesheet" href="/style.css" type="text/css">
</head>

<body>

<div class="title">
	<h1>блаблабла</h1>
</div>

<div class="menu">
блаблабла
боковые ссылки меню
</div>

<div class="main">

<div class="mainPageImg">  
<img src="блаблабла">
</div>

</div>

</html>

в деле можно посмотреть на sparrows точка org точка ua

DjTarik · October 6, 2008

А зачем абсолютное позиционирование?

hooey_ru · October 6, 2008

——

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

—————--

В смысле зачем? А как иначе, без абсолютного позиционирования сделать так, чтобы была, допустим, левая и правая колонка?

Я ориентируюсь на http://www.w3.org/2002/03/csslayout-howto.html.en

DjTarik · October 6, 2008

——
Нда, как я понял, это невозможно. Вот так всегда, хочешь сделать правильно, а в итоге приходится делать таблицей
—————--
В смысле зачем? А как иначе, без абсолютного позиционирования сделать так, чтобы была, допустим, левая и правая колонка?
Я ориентируюсь на http://www.w3.org/2002/03/csslayout-howto.html.en

Глпости... Смотри:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<title>Проверка</title>

<style type="text/css">

div#title {
height: 7em;

border-width: 1px;
border-style: solid;
border-color: red;

}

div#right {
width: 15em;
float: right;

border-width: 1px;
border-style: solid;
border-color: blue;
}

div#left {
margin-right: 15em;

border-width: 1px;
border-style: solid;
border-color: green;
}

</style>

</head>

<body>

<div id="title">title</div>

<div id="right">right</div>

<div id="left">left</div>

</body> 

</html>

Ток границы убери (я их для наглядности писал) и стили вынеси в файл...

P.S. Или те не так надо? O_o

hooey_ru · October 6, 2008

Ага! Моя ошибка была в том, что я считал, что если не указать position: absolute; left: 0; то третий див не прилепится в нужное место

Огромное спасибо, теперь все хорошо

--

Разумеется, CSS в отдельном файле; можете посмотреть итог на sparrows точка org точка ua

Sign In

Как сделать так, чтобы DIV занял все свободное место?

Question

hooey_ru

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

DjTarik

Link to comment

Share on other sites

hooey_ru

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

hooey_ru

Link to comment

Share on other sites

DjTarik

Link to comment

Share on other sites

hooey_ru

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information