Свойство css height не работает в очень простом примере:

0

Это моя html-страница

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Float</title>
    <link rel="stylesheet" href="/style.css" />
</head>
<body>
    <div class="header"></div>
    <div class="slideBar"></div>
    <div class="content"></div>
    <div class="footer"></div>
</body>
</html>

Это мой css

.header {
    width:100%;
    height:20%;
    background-color:red;
}
.footer {
    width:100%;
    height:20%;
    background-color:green;
}
.slideBar {
    width:20%;
    height:60%;
    float:right;
    background-color:blue;
}
.content {
    width:80%;
    height:60%;
    background-color:yellow;
}

когда я запускаю свою страницу. У меня пустая белая страница.

Затем я добавил каждое слово для каждого div следующим образом:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Float</title>
    <link rel="stylesheet" href="/style.css" />
</head>
<body>
    <div class="header">HEADER</div>
    <div class="slideBar">SLIDEBAR</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</body>
</html>

В результате получается следующее: Изображение 174551

Это означает, что свойство height не работает.

Я не хочу использовать пиксель в свойстве высоты. Мне нужно использовать процент

  • 0
    html,body { height : 100%; margin:0px; }
Теги:

1 ответ

2
Лучший ответ

Демо: http://jsbin.com/roxal/1

когда вы используете процент для высоты, тогда значение высоты зависит от значения родительской высоты, поэтому вы должны установить html и значение высоты тела.

<!DOCTYPE html>
<html>
<head>
    <title>Test Float</title>
    <link rel="stylesheet" href="/style.css" />
    <style>
    html, body {height: 100%;}
    .header {
        width:100%;
        height:20%;
        background-color:red;
    }
    .footer {
        width:100%;
        height:20%;
        background-color:green;
    }
    .slideBar {
        width:20%;
        height:60%;
        float:right;
        background-color:blue;
    }
    .content {
        width:80%;
        height:60%;
        background-color:yellow;
    }

    </style>
</head>
<body>
    <div class="header">HEADER</div>
    <div class="slideBar">SLIDEBAR</div>
    <div class="content">CONTENT</div>
    <div class="footer">FOOTER</div>
</body>
</html>
Поделиться
  • 0
    Пока работает демоверсия, не могли бы вы объяснить свой ответ, чтобы ОП знал, почему это жизнеспособное решение?
  • 1
    @DesertIvy спасибо за ваш совет. Я обновил свой ответ.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню