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

У меня возникли трудности с получением 100% высоты страницы, включая содержащиеся div. Кажется, что внутренний div расширяет до 100% высоту всего родительского элемента, а не только на дно, даже если он был перемещен элементом над ним, поэтому ребенок переполняет родителя.CSS Элемент 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>

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

источник

2010-06-24 Derek H

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

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

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

источник

2010-06-24 05:00:44

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

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

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

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

источник

2010-06-24 04:05:20

ур КСС просто ведет себя точно так, как предназначено ...

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

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

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

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

источник

2010-06-24 05:39:17 Kasumi

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

ответ

Смежные вопросы