2012-02-22 3 views
1

Я указание чирок цвет фона для тела страницы:CSS: цвет тела не распространяющий весь путь вниз страницы

<body style="background-color: #0197B1"> 

Это отменяет таблицу стилей, и достаточно уверенные появляется чирок, но не весь путь вниз страницы (как в Firefox и Chrome)

I добавить следующую строку в нижней части:

<br style="clear:both" /> 
    some text 
</body> 

, чтобы попытаться разрешить ситуацию, а также отлаживать, что происходит с инлайн Elemen t внизу. Он появляется (инструмент разработчика Chrome), что тело не проходит полностью вниз по странице. Хм ... почему это происходит, в чем проблема?

Страница можно ознакомиться по адресу: http://www.momentumnow.co/testimonials

Благодарности

ответ

10

Удалите свойство height: 100%; на корпусе (оно установлено в CSS), и фон заполнит всю страницу. Кроме того, в качестве дружественной ноты вы не должны использовать таблицы для разработки веб-сайтов. Это очень плохая практика - то, что вы хотите сделать, легко достижимо без таблиц.

+0

Что делает это свойство «height: 100%» ... почему он имеет этот эффект? Кто-то другой установил его в таблице стилей, поэтому я не решаюсь его изменить. – Ray

+0

@ Ray, прочитайте мой ответ. «height: 100%» делает именно то, что, по вашему мнению, должно - это делает фон на 100% выше, чем кажется на странице. Проблема в том, что ваша страница не имеет понятия, что происходит. –

+1

Он устанавливает высоту элемента тела на высоту окна * браузера *, а не документа. Это означает, что если документ проходит мимо окна (т. Е. Если есть вертикальная полоса прокрутки), стили отображаются только со стороны веб-страницы перед прокруткой вниз. –

1

проверить Firefox только

line 4: html{background-color:#ffffff; height:100% } 

Просто удалите body

или

line 4: html,body{background-color:#0197B1; height:100% } 
+0

Хм, не уверен, что это повлияет на другого разработчика, который использует эту таблицу стилей. Мне нравится ваше первое решение лучше, указав цвет фона teal как на html, так и на теле, который, казалось, работал. Неясно, что означает эта высота 100%. Вы можете уточнить? – Ray

2

Когда вы плаваете элемент, вы удаляете его из потока документа. Страница теряет смысл того, где и насколько велик элемент.

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

Чтобы перекодировать эту страницу было бы легко для тех, кто был знаком с основанной на стандартах семантической разметкой. Я бы предложил изучить эти методы. В то же время решение @Christian Varga пока доставит вас.

+0

Спасибо - я схватил эту страницу от кого-то еще и хотел быстро изменить содержимое. Действительно, это уродливо. Вы знаете, как/почему этот атрибут высоты испортил вещи? – Ray

+0

@ На странице страницы отображается только половина ее высоты, так как все элементы с содержимым удаляются из потока. –

+0

Спасибо. Я собираюсь переделать эту страницу. Вы видели комментарий Родни выше на 100-процентной высоте? – Ray

3

Удалить html {background-color:#ffffff;}, и все должно быть сделано.

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