Заголовок 100% рост минус? [дубликат]

этот вопрос уже есть ответ здесь:

  • CSS-высота 100% минус #px-верхний и Нижний колонтитулы 5 ответов

Я хочу создать макет для панели администратора, но я не знаю, как получить #Nav и содержание всегда на 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>

главная.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;
}

какие идеи?

3 54
html css

3 ответа:

Если ваш браузер поддерживает 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 */

также убедитесь, что у вас есть пробелы между значениями, см.: https://stackoverflow.com/a/16291105/427622

92

Как уже упоминалось в комментариях высота: 100% зависит от высоты родительского контейнера, который явно определен. Один из способов добиться того, что вы хотите, - использовать абсолютное/относительное позиционирование и указывать свойства left/right/top/bottom, чтобы "растянуть" содержимое, чтобы заполнить доступное пространство. Я реализовал то, что я собираю вы хотите достичь в jsfiddle. Попробуйте изменить размер окна результатов, и вы увидите, что содержимое изменяется автоматически.

в ограничение этого подхода в вашем случае заключается в том, что вы должны указать явный margin-top на родительском контейнере, чтобы смещать его содержимое вниз, чтобы освободить место для содержимого заголовка. Вы можете сделать его динамическим, если вы бросаете в JavaScript, хотя.

14

для "100% окна браузера", Если вы имеете в виду этого буквально, Вы должны использовать фиксированное позиционирование. Затем свойства top, bottom, right и left используются для смещения краев divs от соответствующих краев видового экрана:

#nav, #content{position:fixed;top:0px;bottom:0px;}
#nav{left:0px;right:235px;}
#content{left:235px;right:0px}

это позволит настроить экран с левой 235 пикселей, посвященных навигации, и правой остальной части экрана для контента.

Отметим, однако, вы не сможете прокрутить весь экран сразу. Хотя вы можете установить его для прокрутки либо панель по отдельности, применяя overflow:auto к любому div.

Примечание также: фиксированное позиционирование не поддерживается в IE6 или ранее.

3