Простой CSS-макет - PullRequest
Новая
       7

Простой CSS-макет

2 голосов
/ 28 июля 2010

Мне нужно найти кросс-браузерный способ иметь два div, содержащихся в родительском div, где первый дочерний элемент имеет фиксированную высоту, а второй стекает вниз, чтобы содержаться в родительском.

<div id="parent"><div id="header"></div><div id="body"></div></div>

     height: 500px
 _____________________
|  _________________  |
| |  height: 20px   | |
| |_________________| |
|  _________________  |
| |                 | |
| |                 | |
| |  height: 100%   | |
| |                 | |
| |                 | |
| |_________________| |
|_____________________|

Таким образом, родительский элемент имеет фиксированную высоту 500px, div заголовка имеет фиксированную высоту 20px, но высота элемента body должна уменьшаться, чтобы поместиться внутри родительского элемента. Если задать ему высоту 100%, его высота увеличится на 20 пикселей, потому что высота: 100% использует рост родителей, не учитывая детей. Я видел решение с использованием абсолютного положения, но это не работает в IE7 или 6. Существует ли кросс-браузерное решение для этого, так как это относительно простая схема?

Редактировать: Забыл упомянуть, что родительский размер будет изменяемого размера, поэтому не всегда будет 500px. Используя jquery resizable, родительские измерения могут быть чем угодно и будут часто меняться.

Редактировать 2: Я хотел бы отдать должное нескольким людям за это решение, поскольку я принимал советы от всех. По сути, я дал #body высоту 480px и использовал опцию tooResize в resizable для изменения размера родителя и тела.

Ответы [ 5 ]

4 голосов
/ 28 июля 2010 
.parent  { height : auto; }
.child1  { height : 20px;  }
.child2  { height : 480px;  }

Вместо того, чтобы динамически устанавливать размер родителя, управляйте высотой child2.

Надеюсь, это то, что вы просите.

Редактировать: отредактировано согласно вашему обновлению!

1 голос
/ 28 июля 2010

Мое решение для страницы, где родитель имеет динамическую высоту: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <style type="text/css">
            html, body {
                height: 100%;
                margin: 0px;
            }

            #parent {
                height: 80%;
                width: 500px;
                margin-left: auto;
                margin-right: auto;
            }

            #header {
                height: 120px;
                background-color: #456;
                position: relative;
                z-index: 101;
            }

            #body {
                height: 100%;
                margin-top: -120px;
                background-color: #789;
                position: relative;
                z-index: 100;
            }

            #spacer {
                height: 120px;
            }
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="header"></div>
            <div id="body">
                <div id="spacer"><!-- Padding will just increase body's height. --></div>
                Body content.
            </div>
        </div>
    </body>
</html>
1 голос
/ 28 июля 2010

К сожалению, это не такая простая проблема, как вы думаете. Вы можете использовать некоторый JavaScript, чтобы изменить высоту body на основе вычисленной высоты parent.

Но самой простой вещью может быть просто установить body s на 100% и установить overflow: hidden в parent div.

Таким образом, тело будет иметь высоту, равную родительской, но нижние 20 пикселей будут просто обрезаны. Это может быть или не быть приемлемым, в зависимости от того, что вы делаете с body, и от того, потенциально ли его содержание достигнет дна.

Другой подход будет использовать: 

#header { height: 20px; }
#body { height: 480px; }
#parent { height: auto; }

и body будет тем, который изменен в сценарии, а не parent. parent будет автоматически иметь размеры, соответствующие общей высоте header + body.

1 голос
/ 28 июля 2010

Если вы уже знаете высоту внешнего контейнера и высоту делений внутри, вы можете узнать высоту оставшегося div, я думаю.

Попробуйте что-то вроде этого height: 480px;.Держите это простым и легким

0 голосов
/ 28 июля 2010

Если #parent всегда имеет высоту 500px и #header, почему бы просто не поместить 480px (1) в #body?

(1) Конечно, вы должны сбрасывать со счетов любые вертикальные поля или отступы.*

PS: в настоящее время тестирование в IE6 может не стоить времени

...