CSS: 100% проблемы с высотой

Я знаю, что было несколько сообщений относительно высоты: 100% -ная декларация в CSS, но ни одна из них не разрешила проблему, с которой я борюсь.CSS: 100% проблемы с высотой

В двух словах, это то, что я столкнулся: http://cornerstonearts.hostasaurus.com/about/cornerstone_history

Все настройки высоты для элементов и контейнеров дивы - HTML, тела, # статического контента, #sidebar, # статическому MainContent - 100%:

html { 
height: 100%; 
} 

body { 
background-color:#d5af6a; 
margin:0; 
height: 100%; 
} 

#static-content { 
width:960px; 
background-color:#FFF; 
margin-top: 0px; 
margin-right: auto; 
margin-bottom: 0px; 
margin-left: auto; 
position: relative; 
height: 100%; 
overflow-y: visible; 
} 

#sidebar { 
width:320px; 
position: absolute; 
left: 0px; 
top: 0px; 
height: 100%; 
overflow-y: visible; 
} 

#static-maincontent { 
width:600px; 
position: absolute; 
left: 340px; 
top: 0px; 
border-bottom-width: 1px; 
border-bottom-style: solid; 
border-bottom-color: #AC740C; 
height: 100%; 
overflow-y: visible; 
}

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

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

Это одна из тех вещей, которые, я уверен, должны иметь простое решение, которое я просто не вижу. В конце концов, как трудно может быть, чтобы элемент страницы расширялся до 100% высоты его контейнера?

Любая помощь будет оценена по достоинству.

Спасибо!

источник

2012-02-23 Ty Morton

W3 validator показывает 14 ошибок на этой странице. – j08691

Да, я это заметил. Один из них заключается в том, что я дважды использовал один и тот же идентификатор DIV, но остальные являются частью «Like Box» в Facebook, который генерируется FB. –

Элемент, расположенный по абсолютной величине, никак не влияет на обертывающие элементы. Таким образом, высота вашего div # static-maincontent на самом деле не переводится в div # static-content ... он просто плавает над всеми другими элементами.

Удалить все позиции: абсолютных
отдавания ДИВЫХ # боковую панели поплавок: левого
отдавания ДИВ # STATIC-MainContent поплавок: правый
добавить что-то вроде < стиля сНа = "ясно: то и другие; " > после DIV # статического MainContent и внутри DIV # статического контента-
высоты удалить: 100% от DIV # статического контента-

Это должно работать (по крайней мере, с Firebug).

источник

2012-02-23 17:50:18 AaL

Это полностью сработало!Я должен добавить несколько настроек поля, чтобы переместить все, но это сделало трюк. Спасибо! –

FYI, удаляя высоту: 100% от div # static-content разбивает макет на страницах с более короткими статьями (например: http://cornerstonearts.hostasaurus.com/news/news_item_4). Если вы отключите его, белый фон остановится в конце содержимого, а не продолжит вниз до нижней части страницы. –

изменить его в вашем CSS (протестировали его с помощью Firebug - работы) -

#static-content { 
width: 960px; 
background-color: white; 
margin:0 auto; 
position: relative; 
height: auto; 
overflow: hidden; 
} 
#sidebar { 
width: 320px; 
height: 100%; 
overflow-y: visible; 
float: left; 
} 
#static-maincontent { 
width: 600px; 
border-bottom-width: 1px; 
border-bottom-style: solid; 
border-bottom-color: #AC740C; 
overflow-y: visible; 
height: 100%; 
float: left; 
}

источник

2012-02-23 17:57:59

Я считаю, что это будет на самом деле решить вашу проблему. http://jsfiddle.net/AVRMy/1/

Я избавилась от:

overflow-y: visible; 
height: 100%;

от всех ваших CSS. Затем добавил:

 <div style="clear: both; width: 100%;"></div>

сразу после закрытия тега для DIV static-maincontent.

источник

2012-02-23 18:05:32 thepriebe

CSS: 100% проблемы с высотой

ответ

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