HTML5 + CSS3 высота 100% с полем - PullRequest
Новая
       1

HTML5 + CSS3 высота 100% с полем

4 голосов
/ 02 декабря 2011

Учитывая следующий формат HTML: 

<body>
    <header class="site-header">
    </header>

    <section class="site-section">
    </section>

    <footer class="site-footer">
    </footer>
</body>

Я хочу использовать 100% высоты браузера для верхнего, нижнего и нижнего колонтитула.Тем не менее, нет никаких проблем для достижения этого: 

html, body { height:100%; }

.site-header  { height:10%; }
.site-section { height:80%; }
.site-footer  { height:10%; }

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

body > * { margin:1%; }

Независимо от того, есть ли поле или нет - сайт должен всегда использовать 100% высоты браузера.

РЕДАКТИРОВАТЬ: Мне кажется, более подходящим будет использовать вместо этого белую рамку,Однако та же проблема остается.Можно ли указать border-width в процентах?

Ответы [ 6 ]

2 голосов
/ 03 декабря 2011

Я знаю, это будет выглядеть смешно, безобразно и глупо.На самом деле, это так.но я не мог найти лучший способ подойти именно к тому, что вы хотите, не возвращаясь к уродливой разметке.

HTML: 

<header class="site-header">
</header>

<div class="spacer"></div>
<div class="spacer"></div>

<section class="site-section">
</section>

<div class="spacer"></div>
<div class="spacer"></div>

<footer class="site-footer">
</footer>

<div class="spacer"></div>

CSS: 

html,body {height:100%;margin:0;} 
body > * { overflow:hidden;}
.spacer {height:1%;}
.site-header {height:8%;background-color:yellow; }
.site-section {height:78%;background-color:#ffcccc; color:#aaa;}
.site-footer {height:8%;background-color:#ccccff;}

DEMO

0 голосов
/ 11 мая 2013

Это можно легко сделать, используя фиксированное позиционирование и фиксированную высоту для верхнего, нижнего и нижнего колонтитулов. 

<body>
    <header class="site-header"></header>
    <section class="site-section"></section>
    <footer class="site-footer"></footer>
</body>

html {
    height:100%;
}
body {
    padding:0;
    margin:0;
}
body > * {
    position:fixed;
    margin:5px 0;
    width:100%
}
.site-header {
    top:0px;
    height:80px;
    background:red;
}
.site-section {
    top:85px;
    bottom:85px;
    background:green;
}
.site-footer {
    bottom:0px;
    height:80px;
    background:blue;
}

А вот Fiddle

0 голосов
/ 07 февраля 2013

мммм. Вы пробовали что-то подобное? 

cssSelector{width:200px; border:20px; box-sizing:border-box}

Ключ - размер коробки , если мы не используем его, конечная ширина равна 220px,но когда я использую box-size , конечная ширина равна 200px, так что вы можете попробовать и посмотреть, что получится.

:)

0 голосов
/ 02 декабря 2011

Для этого можно использовать свойство css3 FLEX: 

body {
display: -webkit-box;
-webkit-box-orient: vertical;
display: -moz-box;
-moz-box-orient: vertical;
    width:100%;
}
body header,body section, body footer{
    display:block;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
header{
    background:red;
    height:10%;
}
section{
    background:green;
    -webkit-box-flex: 3;
     -moz-box-flex: 3;
}
footer{
    background:yellow;
    height:10%;
}
html, body{
    height:100%;
    margin:0;
    padding:0;
}

http://jsfiddle.net/XMg2h/14/

ОБНОВЛЕНО:

http://jsfiddle.net/XMg2h/15/

работает до IE8 и выше.

0 голосов
/ 02 декабря 2011

маржинальные суммы до высоты.так что в основном вы делаете:

.site-header {height: 10%;margin: 1%;} -> это переводится как {height: 12%}

Чтобы решить вашу проблему, вы можете посчитать поля по элементам:

.site-header {height: 8%}

ИЛИ использовать как обертки без полей (что позволяет использовать поля px) и вообще не стилизовать заголовок, раздел и нижний колонтитул (что, если я не ошибаюсь, поможет сохранить согласованность стиля в старомбраузеры, особенно если используются селекторы типа>). 

body > * > div {margin: 1%}
<body>
    <header class="site-header">
        <div class="inner_header">
        </div>
    </header>

    <section class="site-section">
        <div class="inner_section">
        </div>
    </section>

    <footer class="site-footer">
        <div class="inner_footer">
        </div>
    </footer>
</body>
0 голосов
/ 02 декабря 2011

Просто вычтите поле из высоты элементов: 

.site-header  { height:8%; }
.site-section { height:80%; }
.site-footer  { height:8%; }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...