Css высота 100%

У меня есть следующий HTML:Css высота 100%

<body> 
<div id="page"> 
    <div id="header"></div> 
    <div id="content"></div> 
</div> 
</body>

и CSS:

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

#page { 
    height:100%; 
    margin:auto; 
    left:0; 
    right:0; 
    width:500px; 
} 

#header { 
    height:100px; 
    width:500px; 
} 

#content { 
    width:500px; 
    height:100%; 
}

Проблема заключается в том, что содержание DIV высота окна + высоту заголовка. Как я могу сделать его высотой окна - высоту заголовка, я хочу растянуть горизонтально по всему оставшемуся окну. ??

источник

2013-12-04 user2361682

ли вы хотите что-то вроде этого? http://jsfiddle.net/3nC7Y/3/ - @ user2361682 – Nitesh

в случае, если вам не нужно поддерживать IE7 и ниже - вы можете использовать полезный трюк с

position: absolute

для #header и

padding-top: 100px; 
box-sizing: border-box;

для #content.

Заканчивать эту скрипку: http://jsfiddle.net/Jx4sC/2/

Детали относительно коробчатого размеров поддержки: http://caniuse.com/#feat=css3-boxsizing

источник

2013-12-04 11:16:19

Вы можете использовать calc() в современных браузерах, и пусть браузер вычислить высоту вашего блока контента:

#content { 
    width:500px; 
    height: calc(100% - 100px); 
}

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

источник

2013-12-04 10:57:55 Sirko

Я бы предпочел метод, который тоже работает для немодернистских браузеров :) – user2361682

@ user2361682 Тогда вы можете либо искать полиполк, либо код что-то подобное в JS. – Sirko

Это, несомненно, взломано, и вы можете не делать этого. например, предположим, что вы хотите присвоить #content фоновый цвет, вместо этого поставьте его на #page.

html,body { 
    margin:0; 
    padding:0; 
    /* body should have height:100% by default */ 
} 

#page { 
    height:100%; 
    margin: 0 auto; 
    width:500px; 
    /* use page as you would have used #content*/ 
} 

#header { 
    height:100px; 
} 

#content { 

}

редактировать: но если вам действительно нужно это сделать, you can do it like so

#page { 
    position: relative; 
} 
#content{ 
    position: absolute; 
    top: 100px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
}

это не идеально, потому что, если вы хотите, чтобы сделать больше #header вам нужно помнить, чтобы обновить #content, вы можете больше не использовать обычный макет страницы

источник

2013-12-04 11:08:34 roo2

Css высота 100%

ответ

Смежные вопросы