Высота 100% с отступами.

[sayber]

Добрый день.

Есть проблема, но не как не могу найти решение без использования js.

Требуется див по центру экрана у которого высота 100% но при этом есть отступ.

Соответственно при изменении окна браузера, должен тянуться див и не должен появляться вертикальный скролл.

Собственно нынешний код (урезанный).

<style>

html, body 
{
	padding:0px;
	margin:0 auto;
	height:100%;
	width:100%;	
}

#section
{
	height:100%;
}

#content
{
	height:100%;
	margin:20px;
}

</style>

<div id="section">
	<div id="content">
    	текст
    </div>
</div>

Как это должно выглядеть.

P.S.

Извиняюсь если подобная тема есть, но не нашел ее.

[Bonzash]

Интересная задача Пыхчу, пока не получается.

[psywalker]

sayber, Ну насчёт JS ты погорячился дружище http://forum.htmlbook.ru/index.php?showtopic=27234&view=findpost&p=204730

[Bonzash]

В архив.

[sayber]

Почти что погорячился.

Но я использую CSS3 с скруглением углов.

Соответственно бордер не потянет =((

Т.к. внутренняя рамка становиться квадратной с острыми углами =(

Или я как то не правильно понял.

Edited June 28, 2011 by sayber

[Bonzash]

border-radius ?

[sayber]

border-radius ?

border-top-left-radius:10px;
	border-bottom-right-radius:10px;
	border-top-right-radius:10px;
	border-bottom-left-radius:10px;
	-moz-border-radius-bottomright:10px;
	-moz-border-radius-bottomleft:10px;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-topright:10px;
	-webkit-border-bottom-right-radius:10px;
	-webkit-border-top-left-radius:10px;
	-webkit-border-bottom-left-radius:10px;
	-webkit-border-top-right-radius:10px;

[psywalker]

Почти что погорячился.

Но я использую CSS3 с скруглением углов.

Соответственно бордер не потянет =((

Т.к. внутренняя рамка становиться квадратной с острыми углами =(

Или я как то не правильно понял.

Я тебе дал почти готовый пример. Тебе осталось только допилить его под свой. Дерзай!

[sayber]

Я тебе дал почти готовый пример. Тебе осталось только допилить его под свой. Дерзай!

Ок. Только тему пока не закрывайте.

[psywalker]

Я тебе дал почти готовый пример. Тебе осталось только допилить его под свой. Дерзай!

Ок. Только тему пока не закрывайте.

Даже в мыслях такого не было.

[sayber]

Собственно я сделал то что требовалось. Но вот теперь в продолжении задачи совсем затупил =)

Внутри блока который по центру, требуется разместить еще 5. Пример на изображении ниже.

Т.е. имеются элементы id="header", id="left", id="right", id="footer", id="content".

Каждый из них как то тянется. (см. атач)

Но не выходить за рамки main.

Есть какие идеи?

CSS

html, body 
{
	padding:0px;
	margin:0 auto;
	height:100%;
	width:100%;	
	background-image:url(../../images/design/background.png);

}

header, footer, aside, nav, article, section 
{
	display: block;
}


#global
{
	min-height:100%;
	position:relative;
}

#main
{
	background-color:#2d2d2d;
	position: absolute; 
	top: 25px;
	left: 25px;
	right: 25px;
	bottom: 25px;
	-moz-box-shadow:  0px 0px 8px #000;
	-webkit-box-shadow:  0px 0px 8px #000;
	box-shadow: 0px 0px 8px #000;
	padding:0px;
	border:1px solid #888;
	color:#FFF;

}

#left
{
	background-color:#06F;
	position:relative;
	height:100%;
	width:60px;
	float:left;
}

#right
{
	background-color:#3C6;
	position:relative;
	height:100%;
	width:260px;
	float:right;
}

#content
{
	background-color:#FEFEFE;
	color:#444;
	position:relative;
	margin-left:60px;
	margin-right:260px;
	height:100%
}


#header
{
	background-color:#FC3;
	position:relative;
	margin-left:60px;
	margin-right:260px;
}

#footer
{
	background-color:#F0C;
	position:relative;
	margin-left:60px;
	margin-right:260px;
}

HTML

<section id="global">
    <div id="main" class="canvas">
        <section id="left">left</section>
        <section id="right">right</section>
        <section id="header">header</section>
        <section id="content">content</section>
        <section id="footer">footer</section>
    </div>
</section>

В данные момент footer выползает за объект main

Edited June 29, 2011 by sayber

[amelice]

Дальше можешь тут почитать...

Особенно обрати внимание на то, что сказал Gaspode.(конечно, он в другом контексте)

100% - значит вся высота родителя. Если у родителя высота никак не задана, то и 100% считать не от чего.

Но, в твоем случае, высота родителя(main) "сколько-то (окно просмотра - отступы)" пикселей, так если присвоить content: 100%, значит он берет всю высоту родителя.

далее, у тебя content идет после header-а, то значит футер вылетает на высоту header-а.