Я хочу, чтобы мой контейнер div расширялся по вертикали, чтобы вместить его содержимое?

Я создаю страницу с фоновым изображением, а содержимое находится в центрированном контейнере, который проходит вертикально вниз по странице. Аналогично Yahoo! Макет ответов: http://uk.answers.yahoo.com/

Если вы свернете браузер во время работы с Yahoo! Ответы: вертикальная прокрутка просто становится «длиннее», а весь контент остается в белом контейнере.

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

Я не хочу использовать overflow:auto или любые другие атрибуты переполнения, и мне не нравятся полосы прокрутки.

Пожалуйста, смотрите ниже и заранее спасибо:

body {
background-image: url('images/ppback.jpg');
padding: 0;
margin: 0;
width:100%;
height:100%;
}

#container {
position: relative;
background: #440077;
width: 770px;
margin:0 auto;
top: 0px;
height: 100%; 
opacity: .7;
filter:alpha(opacity=70);
)

containers html expand
person Zahrah Beauty    schedule 17.06.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Просто удалите значение height: 100% из #container. Это устанавливает максимальную высоту вашего контейнера на ту же высоту, что и окно браузера, предотвращая отображение чего-либо длиннее окна.

Я предполагаю, что вы добавили это свойство, чтобы весь фон отображался на странице, когда на странице мало содержимого. Чтобы получить желаемый эффект, вам, возможно, придется создать отдельный div с фиксированным положением и позиционированием по центру с индексом z, меньшим, чем ваш основной #container.

person Andrew    schedule 17.06.2012