CSS - Содержимое, отображаемое за пределами div

У меня проблемы с моей веб-страницей. Картина, вероятно, descibes это лучше, так вот:CSS - Содержимое, отображаемое за пределами div

http://a.imageshack.us/img837/8223/skjermbilde20100902kl18.png

текст в нижней части должен быть внутри белой области. Я хочу, чтобы белый div изменялся по высоте в зависимости от содержимого. У меня есть DIV, что центры белую область в середине:

#mainContainer { 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 20px; 
    width: 800px; 
    min-height: 700px; 
    height: 100%; 
}

Я также набор HTML и тела до 100%. Но проблема в том, что div остается на уровне 100%, независимо от того, сколько контента там. Теперь действительно странная вещь, когда я установил высоту до auto:

http://a.imageshack.us/img837/8295/skjermbilde20100902kl18y.png

Вот как это должно выглядеть (и как это выглядит, используя высота: 100%):

http://a.imageshack.us/img837/7112/skjermbilde20100902kl18b.png

The full page can be found here (нажмите «Om oss», чтобы просмотреть страницу с неуместным текстом)

Я был бы очень признателен, если бы кто-нибудь мог понять, в чем проблема! :-)
(Надеюсь, CSS и HTML легко понять)

Edit: Я просто заметил, что он делает правильно в Safari, но не в Firefox.

источник

2010-09-02 Stian

Вы указали html и body высоту 100%. (Многие дочерние div также имеют высоту: 100%.) Это означает, что они составляют 100% от размера окна , а не контента. IOW, они ограничены высотой окна браузера, и любой контент, который простирается ниже этого, будет за пределами любого используемого фона.

Edit: Для дальнейшей разработки, вы настроили фоновые изображения (отбрасывание тени) на левой и правой на пустых дивы, что вы пытались растянуть используя высоту: 100%, но так как они не содержат ничего, они могут быть только высотой родительских элементов, которые сами по себе являются высотой вектора. Когда вы устанавливаете html и body (или любой другой промежуточный элемент) в height: auto, эти divs (mainContainer-middle-left и -right) сворачиваются до размера их содержимого, что ничего.

Возможно, вы должны перенастроить html, чтобы эти элементы были родителями фактического содержимого и избавились от всех выражений «height: 100%». Они не означают, что вы думаете, что они имеют в виду!

источник

2010-09-02 17:51:11 Doug

Ваше объяснение имеет смысл!Мне всегда говорили, что вам нужно установить html и body на 100%, чтобы иметь возможность устанавливать высоты на div. Используется ли это только в том случае, если вы хотите установить высоту на количество пикселей в виде spesific? Во всяком случае, как я могу сделать div теней теней для увеличения высоты, не используя высоту: 100%? – Stian

Возможно, вместо двух разных div, у которых есть левая и правая тени для теней, я мог бы иметь одно изображение настолько широкое, насколько это необходимо, и просто использовать это как фон на всей средней части. Просто подумайте вслух: P – Stian

Любой div может иметь высоту пикселя, но для установки высоты процента в divs родительские элементы должны иметь некоторую высоту. Если вы думаете об этом, установив высоту, чтобы сказать, что 50% задает вопрос «50% чего?» Если это всего лишь проценты вплоть до body/html, тогда браузер отвечает на вопрос «50% окна просмотра». – Doug

Stian,

Для сНа #mainContainer, установите высоту в автоматический режим.

Для div # mainContainer-middle установите высоту 550 пикселей.

Это должно устранить проблемы с макетом.

источник

2010-09-02 17:12:35 Adam

Благодарим за отзыв. Но, увы, ваше предложение не решает проблему. Div все еще не меняет размер в зависимости от того, сколько контента есть, поэтому, если есть много текста, он все равно будет отображаться вне div. :( – Stian

CSS - Содержимое, отображаемое за пределами div

ответ

Смежные вопросы