Как удалить пробел под нижним колонтитулом в Wordpress?

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

Я не уверен в причине, но размер пробела меняется в зависимости от компьютера/браузера/разрешения.

Поскольку я работаю в Wordpress, у меня есть доступ к пользовательским файлам с CSS и исходными темами, однако я бы предпочел решить эту проблему с помощью пользовательского CSS.

Я хотел бы, чтобы нижний колонтитул лежал в нижней части окна браузера без пробелов под ним.

Q. Пожалуйста, предоставьте мне код/​​решение, которое удалит белые пробелы ниже нижнего колонтитула на моем веб-сайте (предпочтительно пользовательский метод CSS).

Здесь вы можете найти пример пробела на моем сайте. (попробуйте просмотреть разрешение браузера более 1280x800)

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

  1. #footer {overflow: hidden;} не работает

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

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

3 ответа

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

Я бы рекомендовал использовать Sticky Footer для этого. Это позволяет минимальной высоте тела быть той, что находится в браузере, независимо от того, как мало содержимого на странице.

Для решения липкого нижнего колонтитула требуется определенный HTML-код и некоторый базовый CSS. Здесь скрипка липкого нижнего колонтитула Ryan Fiat в действии с использованием кода из его примера.

Код выглядит следующим образом:

HTML:

<div>
 <p>Your website content here.</p>
 
 </div>
 <div>
 <p>Footer content here</p>
 </div>

CSS:

* {
 margin: 0;
}
html, body {
 height: 100%;
 background-color:#eaeaea;
}
.wrapper {
 min-height: 100%;
 height: auto !important;
 height: 100%;
 margin: 0 auto -155px; /* the bottom margin is the negative value of the footer height */
 border:solid 1px red;
}
.footer, .push {
 height: 155px; /* '.push' must be the same height as 'footer' */
}
.footer {
 border:solid 1px blue;
}

Если посмотреть на свою разметку, вы можете использовать существующий div class="clear"> как ваш .push div, тогда вам нужно только добавить div class="wrapper"> вокруг вашего контента.


Попробуйте что-то вроде этого

html {
 height: 100%;
}

body {
 height: 100%;
 flex-direction: column;
 min-height: 100vh;
 display: flex;
}

footer {
 flex-shrink: 0; 
 }


.futovac {
 flex: 1;
 }

ДЕМО: https://help.podio.com/hc/en-us


find you code on .footer you code will be like this,

.footer-top-content .widget_links ul li a {
 border-bottom: 1px #4C4C4C solid;
 background: #333;
 color:#999;

замените этот код на этот,

.footer-top-content .widget_links ul li a {
 border-bottom: 1px #4C4C4C solid;
 background: #333;
 color:#999 !important;
 overflow: hidden;

это помогло мне. надеюсь, что вы тоже ребята..

licensed under cc by-sa 3.0 with attribution.