CSS - пробел в нижнем колонтитуле - PullRequest
Новая
       2

CSS - пробел в нижнем колонтитуле

2 голосов
/ 24 декабря 2011

промежуток между окном браузера и нижним колонтитулом enter image description here

 #footer
 {
 text-align:center;
clear:both;
background: url("images/footer.png") repeat-x #8DC63F;
width:100%;
margin:0;
}


.footer-text 
{
padding: 10px 0 0;
white-space:nowrap;
font-family:'Tahoma';
font-size:10pt;
color: #000000;
}

HTML: 

<div id="footer">
<p class="footer-text">Home | Services | About Us | Products | Contact Us</p> 
<p class="footer-text">2011 &copy; All Rights Reserved.</p>
<p class="footer-text">&nbsp;</p>
</div>

Помогите мне убрать лишнее пространство между окном браузера и нижним колонтитулом

Ответы [ 4 ]

2 голосов
/ 24 декабря 2011

Попробуйте использовать переполнение: скрыто в # нижнем колонтитуле.

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

Надеюсь, это поможет.

0 голосов
/ 24 декабря 2011

Удалите последние <p class="footer-text">&nbsp;</p>, чтобы убрать пробел.

0 голосов
/ 24 декабря 2011

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

HTML 

   <div class="clr"></div>
   <div id="footer">
      <p class="footer-text">Home | Services | About Us | Products | Contact Us</p> 
      <p class="footer-text">2011 &copy; All Rights Reserved.</p>
      <p class="footer-text">&nbsp;</p>
   </div>

CSS: 

    .clr {
         clear:both;
     }
0 голосов
/ 24 декабря 2011

Может быть синтаксис ... 

background: #8DC63F url("images/footer.png") repeat-x bottom center;

и 

padding: 10px 0 0 0;

Я бы также удалил абзац неразрывного пробела, в этом нет никакого смысла.Если вы хотите больше места внизу, добавьте отступ в div.Не используйте пустые абзацы.

...