высота элементов привязана к высоте браузера - PullRequest
Новая
       15

высота элементов привязана к высоте браузера

0 голосов
/ 08 июля 2011

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

html / css ниже делает пару вещей, которые я нахожу странными, и делает это в FF4 / 5, Chrome 12 и Safari 5, так что по крайней мере эта странность одинакова для всех браузеров.

странность, о которой идет речь:

  • элемент кузова, с высотой: 100%, останавливается в нижней части браузера окно. прокрутка вниз показывает белый под серым .
  • синий также останавливается в нижней части окна браузера.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>simple height test</title>
    <style type="text/css">
        html, body {
            border: 0px;
            margin: 0px;
            height: 100%;
        }
        html {
            background-color: #FFFFFF;
        }
        body {
            background-color: #999999;
        }
        #contentBorder {
            width: 20px;
            height: 100%;
            background-color: #666699;
            float: left;
        }
        #contentContainer {
            width: 200px;
            height: 1000px;
            background-color: #333333;
        }
    </style>
</head>

<body>
    <div id="contentBorder"></div>
    <div id="contentContainer"></div>
</body>
</html>

Ответы [ 2 ]

1 голос
/ 08 июля 2011

Kyle S к чему-то относится - попробуйте установить только тело на 100% высоты, а не элемент html.

см. http://jsfiddle.net/A49vb/

Я позволил себе поместить ваш #contentContainer в #contentBorder, чтобы любой (будущий) контент растягивал оба div.

1 голос
/ 08 июля 2011

При указании высоты для body и html в качестве 100% они будут установлены на 100% высоты окна браузера. Если вы хотите, чтобы фон занимал всю вертикальную высоту страницы, он должен работать, если вы удалите height: 100% из первого блока CSS.

...