CSS: 3-рядная (верхний, нижний и нижний колонтитулы, содержимое) жидкая верстка, пытающаяся сделать среднюю развернутой на window.resize - PullRequest
Новая
       14

CSS: 3-рядная (верхний, нижний и нижний колонтитулы, содержимое) жидкая верстка, пытающаяся сделать среднюю развернутой на window.resize

1 голос
/ 03 апреля 2012

Я строю трехрядную схему размещения жидкости.У меня есть фиксированный верхний колонтитул и нижний колонтитул.У меня также есть минимальная ширина для обертки (для этих 3 строк).

Проблема в том, что я не могу изменить среднюю (#content) размеры по вертикали.Если я сделаю позицию: абсолютную , я потеряю контроль над прокруткой.Я думал, что смогу сделать это, используя top, bottom, margin и padding при установке height на 100%, но не смог.

Вот код, который я 'm, чтобы проверить это, и вот ссылка на скрипку: http://jsfiddle.net/inhan/kUZgY/ Вы увидите, что светло-серый фон не будет расширяться при изменении размера окна.

Я готов использовать только CSS, а неиспользовать функции HTML5.Что мне не хватает?Спасибо за любой ввод.

CSS 

body {
    margin:0;
    padding:0;
    border:0;
    height:100%; 
    max-height:100%; 
}
* html body { /*IE6 hack*/
    padding:30px 0;
}
* html #content { /*IE6 hack*/
    height:100%; 
    width:100%; 
}
#wrapper {
    width:100%;
    min-width:800px;
    min-height:100%;
    position:absolute;
}

#header, #footer {
    position:absolute; 
    left:0; 
    width:100%; 
    height:30px;
    overflow:hidden;
    background-color:gray;
    color:white;
}
#header {
    top:0;
}
#footer {
    bottom:0;
}

#content {
    margin:31px 0;
    overflow:hidden;
    width:100%;
    background:rgba(0,0,0,.2);
}​

HTML 

<body>
    <div id="wrapper">
        <div id="header">This is header</div>
        <div id="footer">This is footer</div>
        <div id="content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.<br/><br/>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida. Etiam vehicula urna vel turpis. Suspendisse sagittis ante a urna. Morbi a est quis orci consequat rutrum. Nullam egestas feugiat felis. Integer adipiscing semper ligula. Nunc molestie, nisl sit amet cursus convallis, sapien lectus pretium metus, vitae pretium enim wisi id lectus. Donec vestibulum. Etiam vel nibh. Nulla facilisi. Mauris pharetra. Donec augue. Fusce ultrices, neque id dignissim ultrices, tellus mauris dictum elit, vel lacinia enim metus eu nunc.
        </div>
    </div>​
</body>

Дополнительная информация

На самом деле я не очень заинтересован в установке минимумаширина для всей страницы, но это понадобится некоторому среднему контенту.Поэтому, если я могу, я бы хотел, чтобы вся структура уважала, когда в загружаемом содержимом есть свойство min-width .

1 Ответ

2 голосов
/ 03 апреля 2012

Это должно быть то, что вы после http://jsfiddle.net/kUZgY/6/

Вы просто пропали без вести html {height:100%;}

Я также изменил #header и #footer на position:fixed

...