Специальный способ Wordpress для растяжения (минимальная высота) и т. д. содержимого моих страниц, чтобы после моих нижних колонтитулов не было пробелов?

У меня есть базовый опыт кодирования. В моей установке Wordpress некоторые из моих страниц имеют пустое пространство под нижним колонтитулом, потому что контента недостаточно, чтобы поместить его в нижнюю часть монитора при более высоких разрешениях. Проблема сохраняется в Chrome, Firefox, IE и т. д. Я хотел бы исправить это, чтобы:

  1. Если содержимое короче, чем разрешение браузера, «тело» будет заполнять страницу до тех пор, пока нижний колонтитул не окажется внизу экрана без пустых пробелов после или перед ним.

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

  3. Я хочу, чтобы нижний колонтитул отображался традиционным образом «внизу» страницы, а НЕ липким нижним колонтитулом, который всегда остается внизу экрана, независимо от того, как далеко вы прокручиваете.

Поскольку я работаю в Wordpress, у меня есть доступ к пользовательскому CSS и исходным файлам темы, однако я бы предпочел решить эту проблему с помощью пользовательского CSS и ответа, который признает конкретное исправление Wordpress. Я пробовал несколько решений, но безрезультатно. Мне предложили использовать решение «Sticky Footer» Райана Фиата, но я не уверен, как включить его в свой Wordpress, поскольку он использует PHP, а я в основном редактирую с помощью пользовательского CSS.

Вот Fiddle моего нижнего колонтитула PHP.

В. Пожалуйста, предоставьте мне четкое и прямое решение для Wordpress, которое обеспечит отсутствие пробелов под нижними колонтитулами на моем сайте, когда содержимое короче, чем в браузере.

Вы можете найти пример пробелов на моем веб-сайте

Решения, которые я пробовал:

  1. #footer {overflow: hidden;} в пользовательском CSS не работает.

  2. Поместил html, body, parentDiv, childDiv, section, footer { height : 100%; } в свой собственный css, но это не сработало.

  3. #copyright { padding-bottom: 20px;} "#copyright" находится под нижним колонтитулом, так что это уменьшило пробелы до такой степени, что казалось, что их нет, но в более высоких окнах браузера пробелы снова появлялись.

  4. Решения «div-wrapper, body», такие как Ryan Fiat, похоже, имеют положительные отзывы, но опять же я не могу найти конкретный Wordpress.

Приветствуются ответы тех, у кого есть опыт работы с Wordpress.


wordpress php css whitespace removing-whitespace
person RNDM    schedule 12.08.2014    source источник
comment
Кажется, это пробел для верхней панели меню администратора. Вы пытались удалить его раньше? У вас есть wp_header() в header.php и wp_footer() в футере?   -  person JokiRuiz    schedule 12.08.2014
comment
<?php wp_footer(); ?> находится в моем нижнем колонтитуле, а <?php wp_head(); ?> — в заголовке. Я никогда не пытался его двигать. Я говорю о пробеле после нижнего колонтитула.   -  person RNDM    schedule 12.08.2014
comment
Если вы не коснулись этого, это должна быть позиция в нижнем колонтитуле. Убедитесь, что у вас есть #footer { position: absolute;}   -  person JokiRuiz    schedule 12.08.2014
comment
PHP не работает в JSFiddle.   -  person Arnold Daniels    schedule 12.08.2014
comment
@JokiRuiz не сработал. использовал только для представления кода   -  person RNDM    schedule 12.08.2014

Ответы (1)


arrow_upward
1
arrow_downward

Я не думаю, что есть хорошее чистое исправление CSS, которое каким-то образом не является хакерским, без изменения того, как работает ваша страница (липкий нижний колонтитул или что-то в этом роде).

Вот два варианта:

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

  2. Я бы порекомендовал просто добавить правило CSS body {background: #222}, чтобы сделать основной текст тем же фоном, что и нижний колонтитул. Таким образом, если их содержимое не заполняет все окно, это выглядит так, как будто нижний колонтитул заполняет пустое пространство, а не белый.

person Khan    schedule 12.08.2014
comment
body {background: #222} самое простое, легкое и «гениальное» решение. - person RNDM; 12.08.2014