Элемент CSS 100% Родителя - PullRequest
Новая
       19

Элемент CSS 100% Родителя

1 голос
/ 24 июня 2010

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Home</title>
    <style type="text/css">
    html, body, #container, #content
    {
        height: 100%;
        min-height: 100%;
    }

    html { border: 1px solid red; }
    #content { border: 1px solid blue; }
    </style>
</head>
<body>
    <div id="container">
        <h2>Test</h2>

        <div id="content">
            <p>Testing</p>
        </div>
    </div>
</body>
</html>

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

Ответы [ 3 ]

0 голосов
/ 24 июня 2010

Да, вы можете использовать overflow: hidden; или начать играть с поплавками и клирами.

Я не думаю, что Бог намеревался, чтобы страницы были только на один экран высотой. : -)

Или разрешена вертикальная полоса прокрутки? Если это так, то вы можете проверить: http://matthewjamestaylor.com/blog/perfect-full-page.htm

0 голосов
/ 24 июня 2010

ur css ведет себя точно так, как задумано ...

нет точного способа сделать это только с помощью css, без того, что сказал Брок, очень сложный float <- и по определению, float должен знать фиксированную высоту и ширину и не является динамическим. (На практике большинство браузеров будут пытаться угадать) </p>

Гораздо проще, если вы используете небольшой java-скрипт для определения высоты экрана и первого внутреннего div, а затем задаете разницу во втором внутреннем div. 

<div id="container">
        <div id=content-top">
        <h2>Test</h2>
        </div>

        <div id="content">
            <p>Testing</p>
        </div>
    </div>
0 голосов
/ 24 июня 2010

Я не совсем уверен, чего вы пытаетесь достичь, но это: 

html, body
{
    height: 100%;
    min-height: 100%;
}

Не имеет смысла.Вы не можете контролировать высоту элемента body, так как он содержит все остальное независимо, и элемент html даже не «отображается» таким же образом, как элементы div и span.

Поведение, которое вы описываете, действительно то, что ожидается.Всякий раз, когда вы устанавливаете высоту / ширину элемента на 100%, это означает 100% родительского элемента (с некоторыми возможными исключениями, когда элемент абсолютно позиционирован).

...