3 блока друг под другом

Mister Y · July 2, 2009

Всем доброго времени суток!

Хочется взять револьвер и вышибить себе мозги. Казалось бы задача простая, но то ли меня клинит, то ли неверно создана иллюзия простоты этой задачи.

Условие:

Есть 3 div'а. Назовём их условно: шапка, контент, футер (по логике их расположения на странице).

Все они имеют фиксированную ширину 200px. Располагаются соприкасаясь друг по другом, позиционируются на странице по центру. Получается эдакий столбик.

Контент имеет высоту 200px, располагается в этом столбике точно посередине. А теперь приведу абстрактную формулу, высчитывающую высоты шапки и футера (которые одинаковы) и дающую представление цели задачи.

H = (max (100%, 200px) - 200px) / 2

Как реализовать такую схему в CSS? Пожалуйста, помогите.

psywalker · July 2, 2009

лучше бы ты нарисовал то, что хочешь получить)))

Mister Y · July 2, 2009

Я думал, что формулой всё достаточно понятно выразил, но всё же нарисовал.

1. Страничка как она есть. Разрешение окна браузера = 500x500. Видны все три div'а.

2. Уменьшается ширина окна браузера до 100. Высота до сих пор 500. Видны все 3 div'а. Появилась полоса прокрутки в ширину.

3. Разрешение окна браузера меняется до 200x200. Виден только контент.

4. Уменьшается высота окна браузера до 100. Ширина - 500. Виден только контент. Появилась полоса прокрутки в высоту.

Edited July 2, 2009 by Mister Y

Great Rash · July 2, 2009

Да, объяснять вы не умеете. Я вообще ничего не понял. Чего надо то?

Mister Y · July 2, 2009

Надо описать расположение 3х div'ов.

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

По-другому объяснить, наверное, не получится... Лично мне наиболее понятно объяснение в виде формулы, что я привёл в первом посте.

Great Rash · July 2, 2009

На формулах машины думают. А люди думают ассоциациями и общаются словами.

Что касается вашего случая, то я рекомендую вам использовать таблицу вместо дивов или яваскрипт.

Mister Y · July 2, 2009

Упрощу задачу: футер не нужен.

Но высота шапки высчитывается по той же формуле.

upd.

Таблицу-то можно, конечно. Но проблема та же. Видать придётся яваскрипт писать. Просто я хотел получить ответ на случай отключенного яваскрипта.

upd.

Всё. Придумал. Всем спасибо за внимание.

Edited July 2, 2009 by Mister Y

Searcher · July 2, 2009

так как вы решили эту задачу

Great Rash · July 2, 2009

Хоть написали бы. Я с удовольствием перенял бы опыт.

Mister Y · July 2, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="allow-search" content="yes" />
<link rel="StyleSheet" type="text/css" href="./styles/style.css" />
<title>ПЫЩ</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style>
body, html {
	background-color: silver;
	height: 100%;
	margin: 0;
	padding: 0;
}

.maincenter {
	margin: 0 auto;
	width: 200px;
	position: relative;
	height: 100%;
	background-color: pink;
}

.notlogo {
	top: 50%;
	margin-top: -100px;
	height: 200px;
	width: 200px;
	position: absolute;
	background-color: yellow;
}

.islogo {
	height: 50%;
	position: absolute;
	width: 200px;
	margin-top: -100px;
	padding-top: 100px;
	background-color: white;
}
</style>
</head>
<body>
<div class="maincenter">
<div class="islogo">Some text</div>
<div class="notlogo">Text again</div>
</div>
</body>
</html>

Нижний div я описывать не стал. Оказалось, что он мне не нужен. Однако, он получился как бы автоматически...

Полный копи-паст позволит запустить страничку.

upd.

Ой. Недописал чуток. Джаст э минэт.

upd.

Исправил.

upd.

С нижним div'ом метод тот же. Если не получается, можно z-index заюзать.

Edited July 2, 2009 by Mister Y

rus · July 2, 2009

минэт

Улыбнуло.

Mister Y · July 2, 2009

Ещё вариант. Только в IE < 8 неправильно отображается.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="allow-search" content="yes" />
<title>Test</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style>
* {
	margin: 0;
	padding:0;
}

html, body {
	height: 100%;
}

body {
	position: relative;
	background-color: white;
	color: black;
}

.maincenter {
	margin: 0 auto;
	width: 200px;
	position: relative;
	height: 100%;
	min-height: 200px;
}

.td100 {
	height: 100px;
	width: 0;
}

.td200 {
	height: 200px;
	width: 200px;
	background-color: yellow;
	vertical-align: top;
}

.td0_1 {
	height: auto;
	width: 100px;
	background-color: pink;
	vertical-align: top;
}

.td0_2 {
	height: auto;
	width: 100px;
	background-color: blue;
	vertical-align: top;
}

.islogo {
	height: 100%;
	width: 200px;
	background-color: white;
}
</style>
</head>
<body>
<div class="maincenter">
<table class="islogo" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="td0_1" colspan="2" rowspan="1">Some text</td>
</tr>
<tr>
<td class="td200" colspan="1" rowspan="2">Some Text</td>
<td class="td100" colspan="1" rowspan="1"></td>
</tr>
<tr>
<td class="td100" colspan="1" rowspan="1"></td>
</tr>
<tr>
<td class="td0_2" colspan="2" rowspan="1">Some Text</td>
</tr>
</table>
</div>
</body>
</html>

Great Rash · July 3, 2009

Елки-моталки... я почему то совершенно про другое думал. Тут, конечно сложностей нет. Правда есть минус - контент в верхнем и нижнем дивах уезжает под центральный. Я то думал, что надо сделать резину но чтоб контент не прятался. Хотя конечно все от задачи зависит

Sign In

3 блока друг под другом

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information