Странное поведение с DIVs и 100% высотой в CSS - PullRequest
Новая
       7

Странное поведение с DIVs и 100% высотой в CSS

0 голосов
/ 21 июня 2011

Казалось бы, тривиальная проблема.

У меня есть очень простая страница в Visual Studio 2010. У нее есть главная страница ... 

<body>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" />
        </div>
    </form>
</body>

... с ... 

<div class="divStretch" />

... один в содержании.

CSS это: 

body, form, html
{
    background-color: Black;
    height: 100%;
}

body
{
    margin: auto;
}

.divStretch
{
    background-color: Red;
    height: 100%;
}

Теперь с тегами <div> вокруг ContentPlaceHolder вся страница становится черной. То есть, div контента не отображается. Без тегов <div> красный цвет везде и высота содержимого div примерно в два раза выше высоты окна, в результате чего появляется вертикальная полоса прокрутки.

Все, что я хотел бы, чтобы содержимое div точно заполняло окно.

1 Ответ

0 голосов
/ 21 июня 2011

Поскольку я новичок здесь, мне не разрешено добавлять комментарии к вашему вопросу - извините за это! Я постараюсь ответить на ваш вопрос и приму некоторые вещи. Я отредактирую ответ, если я ошибаюсь в своих предположениях.

Я предполагаю, что под "содержимым div", который вы упоминаете в конце, вы ссылаетесь на div, который находится внутри формы, и когда вы говорите, что хотите, чтобы он точно заполнил окно, на которое ссылается высота (если вы хотите заполнить ширину в этом примере, просто добавьте ширину: 100%)

Что я придумал: http://jsfiddle.net/trev/3xuzZ/

Я использовал следующий CSS: 

body {
    margin: 0px;
    padding: 0px;
    background: black;
}

.contentDiv {
    position: fixed;
    top: 0px;
    bottom: 0px;
    background: red;
}

И следующий HTML: 

<body>
<form>
    <div class="contentDiv">
        <input type="text" /> <br />
        <input type="text" /> <br />
        <input type="text" /> <br />
        <input type="text" /> <br />
        <input type="submit" value="Button!" />
    </div>
</form> 
</body>

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

...