Я хочу создать макет для панели администратора, но я не знаю, как получить контейнер #nav и #content всегда в 100% окна браузера. Я не понимаю наследования 100% атрибутов высоты, может кто-нибудь объяснить это более ясно?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>index.htm</title>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div id="header">
<img src="./img/header_logo.png" alt="bla"/>
</div><!-- #header -->
<div id="nav">
</div><!-- #nav -->
<div id="content">
asfdg
</div><!-- #content -->
<div class="clear">
</div>
</body>
</html>
main.css
html, body{
font-family: Helvetica, "Helvetica Neue", Arial, Geneva, sans-serif;
margin: 0px;
padding: 0px;
height: 100%;
}
img{
margin: 0px;
padding: 0px;
border-width: 0px;
}
#wrapper{
}
#header{
background: url(img/header_bg.png) repeat-x;
height: 65px;
padding-top: 20px;
padding-left: 25px;
}
#nav{
width: 235px;
float: left;
background-color: #f7f7f7;
border-right: 1px solid #d9d9d9;
height: 100%;
}
#content{
float: left;
width: auto;
padding: 15px;
}
.clear{
clear: both;
}
любые идеи?
Если ваш браузер поддерживает CSS3, попробуйте использовать элемент CSS Calc()
height: calc(100% - 65px);
вы также можете добавить параметры совместимости браузера:
height: -o-calc(100% - 65px); /* opera */
height: -webkit-calc(100% - 65px); /* google, safari */
height: -moz-calc(100% - 65px); /* firefox */
также убедитесь, что у вас есть пробелы между значениями, см. fooobar.com/questions/119212/...
Как указано в высоте комментариев: 100% полагается на высоту родительского контейнера, который явно определен. Один из способов добиться того, что вы хотите, - использовать абсолютное/относительное позиционирование и указать свойства "left/right/top/bottom", чтобы "растянуть" содержимое, чтобы заполнить доступное пространство. Я реализовал то, что я собираюсь, вы хотите достичь в jsfiddle. Попробуйте изменить размер окна результатов, и вы увидите, что размер содержимого автоматически изменится.
Ограничение этого подхода в вашем случае состоит в том, что вам нужно указать явный margin-top в родительском контейнере, чтобы смещать его содержимое вниз, чтобы освободить место для содержимого заголовка. Вы можете сделать его динамическим, если вы используете javascript.
Для "100% окна браузера", если вы имеете в виду это буквально, вы должны использовать фиксированное позиционирование. Верхнее, нижнее, правое и левое свойства затем используются для смещения краев divs из соответствующих краев окна просмотра:
#nav, #content{position:fixed;top:0px;bottom:0px;}
#nav{left:0px;right:235px;}
#content{left:235px;right:0px}
Это создаст экран с левыми 235 пикселами, посвященными навигационной панели, и остальную часть экрана для контента.
Обратите внимание, что вы не сможете прокручивать весь экран за раз. Хотя вы можете установить его для прокрутки по одной панели отдельно, применяя overflow:auto к div.
Примечание: фиксированное позиционирование не поддерживается в IE6 или ранее.