Помогите разобраться с позиционированием ДИВов

цсс любитель · October 24, 2009

Доброго дня. Помогите с позиционированием элементов.

Есть 4 дива:

Должно все выглядеть примерно так:

Нужно чтобы:

1. при включении свойства display:none у #left, ДИВ #right должен автоматом занимать его место и растягиваться по всей ширине экрана.

2. при изменении размера окна, должны сжиматься ДИВЫ:

left - по высоте, до какого то предела, по ширине он фиксированный.

right - должен и по высоте и по ширине, до какого то предела

header и footer по ширине, по высоте они фиксированные.

Подскажите как правильно начать позиционировать, чтобы во всех браузерах корректно работало.

Буду рад любым советам, Спасибо.

psywalker · October 24, 2009

Лови:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Запоминай</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
		div#header,
		div#footer { clear: both; height: 100%; background: red; overflow: hidden;}

		div#left { float: left; width: 300px; background: blue;}
		div#right { overflow: hidden; zoom:1; background: green;}
</style>
</head>

<body>
	<div id="header">HEADER</div>
	<div id="left">LEFT</div>
	<div id="right">RIGHT</div>
	<div id="footer">FOOTER</div>
</body>
</html>

цсс любитель · October 25, 2009

psywalker, все шикарно, вот только как сделать, чтобы #left и #right, вне зависимости от своего содержимого, занимали по высоте все оставшееся пространство окна. То есть, динамически, в зависимости от текущего размера окна, подбирали высоту.

Игорь Ермаков · October 25, 2009

html{height:100%}

body{height:100%}

#left{height:100%}

#right{height:100%}

Самый простой способ.

цсс любитель · October 25, 2009

Да, способ простой, только тогда появляется скролбару у окна, видимо придется с тегом position разбираться..

psywalker · October 25, 2009

Игорь Ермаков

html{height:100%}
body{height:100%}
#left{height:100%}
#right{height:100%}
Самый простой способ.

Всё это чушь, никогда так не делай))

цсс любитель

psywalker, все шикарно, вот только как сделать, чтобы #left и #right, вне зависимости от своего содержимого, занимали по высоте все оставшееся пространство окна. То есть, динамически, в зависимости от текущего размера окна, подбирали высоту.

Это не так просто друг, на это нужно время, поэтому пока я не в состоянии тебе помочь, будет время, обязательно помогу

цсс любитель · October 25, 2009

спасибо, всегда буду рад дельным советам

а пока начну экспериментировать с position: fixed и position: absolute

psywalker · October 25, 2009

спасибо, всегда буду рад дельным советам
а пока начну экспериментировать с position: fixed и position: absolute

а это друг уже тяжёлая артелерия и с ней надо осторожно, так что смотри..

maxtt · October 26, 2009

Лови:

<style type="text/css">

</style>

можно поинтересоваться для чего это тут?)

div#header,

div#footer { clear: both;height: 100%; background: red; overflow: hidden;}

div#right { overflow: hidden; zoom:1; background: green;}

Edited October 26, 2009 by maxtt

Justnewone · October 26, 2009

можно поинтересоваться для чего это тут?)
div#header,
div#footer { clear: both;height: 100%; background: red; overflow: hidden;}
div#right { overflow: hidden; zoom:1; background: green;}

Специально для того, чтобы отловить тех, кто не знает CSS и отправить их изучать тут на сайте "по шагам".

Sign In

Помогите разобраться с позиционированием ДИВов

Question

цсс любитель

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

psywalker

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

psywalker

Link to comment

Share on other sites

цсс любитель

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

maxtt

Link to comment

Share on other sites

Justnewone

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information