Как построить этот макет с помощью CSS? - PullRequest
Новая
       34

Как построить этот макет с помощью CSS?

5 голосов
/ 27 июля 2010

Я не новичок в CSS, но это проблема для меня, и я не могу ее решить. Мне нужно построить макет, как показано ниже:

Макет http://img121.imageshack.us/img121/2153/layoutsample.jpg

Div, которые находятся внизу и вверху, имеют фиксированную высоту. Один в центре должен быть точно на высоте СТРАНИЦА ВЫСОТА - DIV 1 ВЫСОТА - DIV 3 ВЫСОТА или в некоторых случаях меньше.

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

Я приму случай, когда DIV2 будет меньше, но никогда не будет слишком большим, чтобы соответствовать размеру страницы с DIV1 и DIV3.

Любые решения будут хороши, не только с использованием CSS, но если у вас есть идея, вы также можете добавить Javascript ... Я буду благодарен за любое решение ... даже не полностью корректное:)

Ответы [ 4 ]

8 голосов
/ 27 июля 2010

Я полагаю, вы хотите что-то вроде этого 

<div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; overflow:hidden;"> 
</div>
4 голосов
/ 27 июля 2010

Это поможет вам центрировать деления по вертикали и горизонтали

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

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

Использование jQuery для установки высоты DIV2 при изменении размера окна: 

var $div1 = $('#DIV1'),
    $div2 = $('#DIV2'),
    $div3 = $('#DIV3'),
    $window = $(window);

$window.resize(function ()
{
    $div2.height($window.height() - ($div1.height() + $div3.height()));
});

- это еще одна опция, которую я использовал.

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

Я не уверен, правильно ли я понимаю, что вы спрашиваете.Но как насчет этого? 

<html>
<head>
<style>
body {
    margin : 0
}

#top {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    border: solid 1px black
}
#middle
{
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    width: 100%;
    overflow: auto;
    border: solid 1px green;
}

#bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100px;
    width: 100%;
    border: solid 1px blue;
}

</style>

</head>
<body>
    <div id="top"></div>
    <div id="middle"></div>
    <div id="bottom"></div>
</body>
</html>
...