div - 100%-margins

persten · June 13, 2012

есть шаблон:


<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
<title>template - width 1024 center</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">

<style>
* {margin: 0; padding: 0}
html, body {height: 100%}

body {
  background: #CCFF33;
}

#content {height: auto !important; height: 100%; min-height: 100%; background: #FFFFCC}
#content .menu {width: 1024px; margin: 0 auto; padding: 105px 20px 5px 20px; border: 1px solid red;}
#content .container {width: 1024px; margin: 0 auto; padding: 30px 20px 60px 20px; border: 1px solid red;}

#footer {height: 50px; margin-top: -50px; background: #CCFFFF}
#footer .container {width: 1024px; margin: 0 auto; padding: 5px; border: 1px solid red;}

#header {width: 100%; height: 100px; position: absolute; top: 0; left: 0; background: #CCFFCC }
#header .container {width: 1024px; margin: 0 auto; padding: 20px; border: 1px solid red;}

/* FIX FOR IE6 */
*html body { text-align: center;}
*html div.menu { text-align: left;}
*html div.container { text-align: left;}
</style>
</head>

<body>
<div id="header"><div class="container">Шапка</div></div>
<div id="content">
  <div class="menu"><a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a></div>
  <div class="container">
    <h3>Content header</h3>
    <br /><br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
    content<br />
  </div>
</div>
<div id="footer"><div class="container">Подвал</div></div>
</body>
</html>

сейчас как бы схема такая по высоте:

header - 100px

content - 100%

footer - 50px

у контента выставлены padding для header и footer

хотелось бы следующее:

——————————

| отступ (margin) высотой 100px |

——————————

| |

| Контент - 100%-150px

| |

——————————

| отступ (margin) высотой 50px |

——————————

можно как нибудь проставить у content внешние отступы без появления скролла вертикального?

или можно как нибудь сделать div внутри контента чтоб растягивался от header до footer и по высоте?

стоит задача сделать блок content со скругленными углами и на данном шаблоне все углы скрываются в header и footer

очень нужно!!! помогите пожалуйста!

Ergonav · June 13, 2012

http://csstemplater.com/

Думаю ты разберешься

persten · June 15, 2012

http://csstemplater.com/
Думаю ты разберешься

сходил, получил примерно такой же шаблон как и у себя :dash:

Sign In

div - 100%-margins

Question

persten

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Ergonav

Link to comment

Share on other sites

persten

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information