Вопросы Теги

Создание «сэндвича div» с div с кусочками хлеба фиксированной высоты и расширяемым div с мясом

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

Вот что у меня есть на данный момент. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        #top {
            position:relative;
            height:100px;
            background-color:pink;
            width:460px;
            word-wrap:break-word;
        }
        #wrapper {
            position:relative;
        }
        #expand {
            min-height:100%;
            height:auto;
            background-color:#EEEFFF;
        }
        #bottom {
            height:100px;
            background-color:#EEEEEE;
        }
        div.clear{
            position:absolute;
            width:100%;
            clear:both;
            height:1px;
            overflow:hidden;
            border:solid orange;
        }
    </style>
    <title></title>
</head>
<body>

    <div id="top">
        a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a
    </div>
    <div id="wrapper">
        <div id="expand"></div>
        <div id="bottom"></div>
        <div class="clear"></div>
    </div>
</body>
</html>

Мне нужен способ, чтобы содержимое верхней части соприкасалось с «очистить» нижнюю обертку и переместить обертку вниз.

7
задан Paul D. Waite 3 November 2010 в 22:24
поделиться