Wordpress: Дополнительное пространство ниже нижнего колонтитула

Question

Я прочитал много ответов относительно этого, но это не решает мою проблему. На главной странице, когда я прокручивал нижнюю часть, нижний колонтитул имеет дополнительное пространство, но кажется, что дополнительное пространство под ним является фоном моей страницы. На других страницах нижний колонтитул в порядке. Я думаю, что это произошло потому, что моя главная страница содержит короткий контент. Я на самом деле обманул его боковую панель, добавив край дна. Любая помощь, которая применяется ко всем браузерам и любым размерам экрана, которые исправит это? Благодаря!

Это CSS моей сноски:

#footerArea{ 
    height:108px; 
    width:100%; 
    z-index:5; 
    background:url('../images/footerArea.jpg') #404042; 


} 
#footerPart{ 
    height:48px; 
    width:988px; 
    margin:0 auto; 
    padding:0px; 
    background:url('../images/footerbg.jpg') no-repeat #404042; 
} 
#footerPart a { 
    text-decoration:none; 
} 

#footerLink{ 
    margin:0 auto; 
    padding:15px 0px 0px 0px; 
    width:960px; 

    } 
#footerLink ul{ 
list-style-type:none; 
float:left; 
} 
#footerLink ul li{ 
    display:inline; 
    margin:0px 5px 0px 0px; 
} 
#footerLink ul li a{ 
    background:url('../images/footerbtn.jpg') no-repeat; 
    font-size:10px; 
    text-decoration:none; 
    padding:0px 0px 0px 15px; 
} 

Редакции: Это из footer.php

<div id="footerArea"> 
     <div id="footerPart"> 
     <div id="footerLink"> 
      <ul> 
     <li><a href="<?php bloginfo('url'); ?>?page_id=10">xxx</a></li> 
     <li> | </li> 
     <li><li><a href="<?php echo get_option('home'); ?>/?page_id=17">yyyy</a></li> 
     <li> | </li> 
     <li><a href="https://zzz.com" target="_blank">zzzzz</a></li> 
     <li> | </li> 
     <li><a href="http://aaa.com" target="_blank">aaaaaa</a></li> 

     </ul> 
     <p class="fR">SOME TEXT　<a href="http://www.somesite.php" target="_blank">ggggg</a></p> 
    </div> 
    </div> 
</div> 


</body> 
</html> 

Я проверил его в Chrome, Firefox и IE, но он имеет то же самое вывод.

Answer 1

В вашем HTML-метке есть тег <li>, встроенный в другой <li>, который недействителен для вашего кода, так как он не имеет закрывающего тега.

В дополнение к этому трудно отладить такую ​​неопределенную проблему, как «Имеет дополнительное пространство». Чтобы обеспечить дальнейшее понимание, было бы замечательно, если бы вы могли предоставить jsfiddle или что-то подобное.

Если вы не можете предоставить это или не знаете, как это сделать, я могу предложить несколько советов по отладке. Если вы используете google chrome для отладки, вы можете зайти в свой инспектор webkit или firebug, если используете firefox (щелкните правой кнопкой мыши, «проверить элемент») и посмотрите на CSS и бокс для элементов в виде патикула.

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

Answer 2

Проверьте, есть ли у вас какой-либо код отслеживания сети или любой другой javascript (в тегах javascript) в конце вашего документа. Хотя это должно быть несколько строк кода javascript, оно иногда занимает место под нижним колонтитулом в некоторых браузерах, особенно в IE. Если вы можете указать ссылку codepen, мы можем рассмотреть