Как удалить это дополнительное пространство внизу страницы HTML?

У меня есть HTML-страница, структура которого, как это -Как удалить это дополнительное пространство внизу страницы HTML?

<html> 
    <head>...</head> 
    <body> 
    <div id="header">...</div> 
    <div id="in-body">...</div> 
    <div id="footer">...</div> 
    </body> 
</html>

Моя цель состоит в том, чтобы сделать #header & #footer статическими в верхних & нижней части страницы, соответственно, но всегда есть некоторое оставшееся после #footer пространства ,

Я подумал, если добавив% height х годов div с даст 100%, я мог бы покрыть всю body область, но до сих пор даже как сейчас я использую (18 + 75 + 3)% = 96% в height, есть еще место осталось после #footer.

CSS-за это -

html { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

body { 
    height: 97.9%; 
    margin: 8px 8px 0px 8px; 
} 

#header { 
    height: 18%; 
    margin: 0; 
} 

#in-body { 
    height: 75%; 
    margin: 0; 
} 

#footer { 
    height: 3%; 
    margin: 0; 
}

Я проверил с Developer Tools в Chrome, что не существует никаких дополнительных margin или padding в любом месте.

Если я попытаюсь сделать добавление 100%, появится полоса прокрутки, и все еще осталось это место, которое не принадлежит ни одному элементу (из инструментов разработчика Chrome), даже не html, но оно остается только там ,

Я использовал body-height: 97.9%, потому что мне нужен только весь видимый html-height без переполнения.

Я проверил это в IE11, Chrome 50 и Firefox 46, и это одно и то же.

Сохранение html { overflow: hidden } скрывает его в IE & Firefox, но не в Chrome.

Что вызывает это? Есть ли способ, кроме использования overflow, чтобы удалить его?

Если я ошибаюсь в своем подходе в любом месте, не стесняйтесь меня исправлять.

Here полный код.

Спасибо.

Редактировать: Я протестировал код, упомянутый выше, с каждым тегом, имеющим другой цвет bg, и он отлично работает. Таким образом, это мой код, который вызывает проблемы. Помоги мне, пожалуйста.

источник

2016-04-28 PalashV

'тело {утеплитель: 0; } '. У вас есть край дна к нулю, но не дополнение. –

Как я уже писал, в любом элементе, вызывающем это, нет лишнего 'padding' или' margin'. Я проверил их всех. – PalashV

Можете ли вы добавить рабочий пример? Вы не говорите правду. Когда вы удаляете отступы и поля из тегов 'html' и' body', вы не получите пробела. Я думаю, что у вас больше конфликтов с кодом. Поделитесь рабочей скриптой (например, с файлами или jsfiddle.net), воспроизводя проблему, и мы увидим, в чем проблема. –

Вы можете использовать метод calc() в CSS3, чтобы убедиться, что при использовании% и px не существует разницы.

Так ваше тело класс может быть:

body 
{ 
    height: calc(100% - 8px); 
    margin: 8px 8px 0px 8px; 
}

источник

2016-04-28 07:58:22 niandrei

Спасибо, но это не решает мою проблему. – PalashV

не должно быть 100% -8px? – Pete

@Pete Yup, причина, что '8px' принадлежит к' margin-up' для удаления из '100%'. – PalashV

Как удалить это дополнительное пространство внизу страницы HTML?

ответ

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