Не удается удалить маржу/заполнение на нижнем колонтитуле

У меня возникли проблемы с удалением фантомного поля/дополнения в нижнем колонтитуле. Я создал простой сайт, чтобы проиллюстрировать эту проблему:Не удается удалить маржу/заполнение на нижнем колонтитуле

http://autodatanetwork.com/index-simple.html

В частности у меня трудное время удаления зеленого ~ 15px отступы в самом низу сайта. Странно, если я добавлю дополнение к нижнему колонтитулу до 15 пикселей, ничего не произойдет. Если увеличить нижний колонтитул, превышающий нижний колонтитул, но нижний колонтитул «фантом» исчезнет. На нижнем колонтитуле есть какая-то минимальная высота. Заранее спасибо за вашу помощь.

html ниже, где я добавил некоторые встроенные стили для целей отладки.

<!doctype html> 
<html lang="cs"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Test simple</title> 
     <meta name="description" content=""> 
     <meta name="keywords" content=""> 
     <meta name="author" content="David Kohout & Tomáš Lach - www.tomaslach.cz"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <link rel="shortcut icon" href="/favicon.ico"> 
     <link rel="apple-touch-icon" href="/apple-touch-icon.png"> 
     <link rel="stylesheet" href="css/main.css" media="screen,projection"> 
     <link rel="stylesheet" href="css/print.css" media="print"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
     <script src="js/custom.js"></script> 
     <!--[if lt IE 9]> 
     <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
    </head> 
    <body style = "background: #F00; padding: 0px; margin: 0px;"> 
     <header>      
     </header> 
     <div id="content" style=" background:#0FF; padding-bottom: 1000px;">     
     </div> 
     <!--/#content -->  
     <footer style = "background: #000; padding-bottom: 5px; margin-bottom: 0px; " > 
      <div class="wrap clearFix" style = "background: #00F " > 
      </div> 
     </footer> 
    </body> 
</html>

источник

2015-01-08 pyro70

Здесь преступник (строка 36):

.clearFix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
}

. характер вызывает разрыв. Изменить content: "." на content: "".

В качестве альтернативы, поскольку вы явно устанавливаете высоту 0, вы также можете просто добавить overflow: hidden, чтобы скрыть этот пробел.

В качестве примечания, я предлагаю изменение класса к:

.clearfix:after { 
    content: ''; 
    clear: both; 
    display: table; 
}

источник

2015-01-08 02:54:43

Не удается удалить маржу/заполнение на нижнем колонтитуле

ответ

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