Получение 100% высота/ширина границы на основной DIV (или тела)

Question

http://designobvio.us/vodka/ Живая демо

Я настроил мой HTML, контейнер, основной и 100%, но NoMatter, что я не могу получить границу, чтобы быть 100% высота без полос прокрутки?

Как я могу добиться эффекта?

HTML

<div id="main"> 

    </div> 

CSS (не в настоящее время живут код, но это то, что я пробовал)

html, body{height:100%; width:100%;} 
#main{height:100%; position:absolute; top:0px; bottom:0px; left:0px; right:0px; border:5px solid #000;} 

Answer 1

Вы ищете фиксированную границу или динамическую границу? Проблема с вашим кодом - это модель коробки W3C. В модели по умолчанию добавление, край и граница добавляются к размеру вашего элемента. Таким образом, в вашем коде, что вы действительно говорите, «сделайте поле 100%, а затем добавьте 10px значение границы».

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

1) Если вы ищете фиксированную границу, это хороший трюк: http://css-tricks.com/body-border/ 2) Если вам нужна динамические границы, вам нужно каким-то образом обойти дополнительную высоту на границе добавляет. Вот один из способов:

html,body { height:100%; padding: 0; margin: 0; } 
#container { 
    min-height:100%; 
    border-right: 5px solid #000; 
    border-left: 5px solid #000; 
    position: relative; /* relative postion so we can absolutely position footer within it */ 
} 
#header { 
    height: 100px; 
    border-top: 5px solid #000; 
    background-color: red; 
} 
#content { padding: 0 0 100px 0; } /*padding must be equal to the height of the footer*/ 
#footer { 
    height: 100px; 
    border-bottom: 5px solid #000; 
    background-color: blue; 
    position: absolute; 
    bottom: 0; 
    width: 100%; /* with absolute position, a width must be declared */ 
} 

HTML

<div id="container"> 
    <div id="header"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div> 

jsfiddle здесь: http://jsfiddle.net/Qw2cb/

Answer 2

Итак, вы говорите, что вы не хотите, чтобы отобразить полосы прокрутки?

CSS:

#main 
{ 
    overflow: hidden; 
    height: 100%; 
    position: absolute; 
    margin: 0px; 
} 

Answer 3

По умолчанию границы, маржа и обивка не являются частью ширины/высоты и добавляются сверху. Вот почему вы получаете полосы прокрутки, поскольку полные размеры окна составляют 100% по высоте и ширине плюс ширина границы.

Вы можете установить box-sizing свойство border-box, который сообщает браузеру, чтобы включить расчет для границ и дополнения в свойствах ширина/высота (в противоположную content-box, который является значением по умолчанию):

#main { 
    box-sizing: border-box; 
    [...]  
} 

в особенности IE8 и более ранняя версия других семейств браузеров не поддерживает эту CSS-свойство, это хорошая идея, чтобы добавить несколько определений для разных браузеров, тоже:

#main { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    -ms-box-sizing:  border-box; 
    box-sizing:  border-box; 
} 

Ta Посмотрите на mozilla doku for detailed information on box-sizing.

Answer 4

Я знаю, что это старый пост, но поскольку он появляется на первой странице Google ...Вот мое решение, которое, кажется, работает хорошо кросс браузеры:

height: 0: 
border-style: solid; 
border-width: 8vw 0 0 100vw; 
border-color: transparent transparent transparent red; 

Просто использовал его для: после псевдо-элемента для того, чтобы превратить его в форме треугольника, и она работает просто отлично (тест до IE10).

Просто используйте 100vw вместо 100%, и он должен сделать трюк.

Answer 5

Вы можете дать box-size:border-box; на «основной», как

#main{ 
    box-size:border-box; 
} 

Это граница будет добавлена ​​к 100% высоты основной. Learn more about box sizing here