Лишнее пространство снизу html

Пустое пространство внизу страницы за пределами тегов html на мобильном устройстве после указания ширины, превышающей 100% для элемента

Проблема, с которой я сталкиваюсь, напоминает «пустое место», которое находится внизу моей страницы. Это видно только на мобильных устройствах, и я не смог воспроизвести проблему на рабочем столе, но, зайдя в modor разработчика на chrome и посетив свой веб-сайт, я вижу проблему. При использовании режима разработчика в chrome и проверке всех элементов становится очевидным, что «пустое пространство» — ничто. Он не содержит информации и не привязан к какому-либо элементу. Однако после некоторого копания было обнаружено, что «пустое пространство» всплывает только после того, как задано значение ширины элемента. И не только ширина, но и ширина, которая превышает порт представления. Что-то еще, что привлекло мое внимание, это то, что высота этого «пустого пространства» такая же, как высота порта просмотра.

Что я пытаюсь выполнить

Вы можете задаться вопросом, почему я устанавливаю ширину, превышающую порт представления, поэтому я рассуждаю об этом, потому что я пытаюсь создать мобильный (только) веб-сайт, который использует горизонтальную прокрутку как способ разбиения на страницы между различными контентами. Моя цель состоит в том, чтобы выполнить это исключительно с помощью css3 и html, без jQuery, без JavaScript и предпочтительно не с готовыми плагинами. Пока «горизонтальная прокрутка» дает мне желаемый эффект, кроме огромного количества белого пространства, которое он дает в нижней части моей страницы. Я хотел бы потратить свое время на попытку «исправить», а не заменить его.

Воссоздание проблемы

Самый простой способ воссоздать мою проблему — начать с чистого html файла и предоставить ему следующие элементы:

Изменить:

Добавление некоторых скриншотов моего инструмента разработчика Chrome для визуализации проблемы. См. здесь фактическое содержимое веб-сайта, так как вы можете видеть, что все похоже на намеренное. Ширина 200vw , а высота — 100vw . См. здесь проблему, записанную как «пустое пространство» , как описано в OP. Обратите внимание, что пустое пространство растягивается в два раза больше высоты height: 100vh , как установлено в стиле css. Ширина растягивается относительно содержимого, width: 200vw . Размер экрана проявителя Chrome в модуле устройства ( CTRL — SHIFT — M ) равен 360×640 (ширина x высота).

Источник

CSS Белое пространство внизу страницы

Как я могу избавиться от пространства внизу страницы?

/* Basic Style */ html, body < height: 100%; >body < background-color: #FFFFFF; font-family: 'Roboto', sans-serif; font-size: 12pt; font-weight: 100; color: #212121; text-decoration: none; line-height: 100%; height: 100%; margin: 0px 0px 0px 0px; >a:link < color: #42b4da; font-family: 'Roboto', sans-serif; text-decoration: none; >a:visited < color: #002946; text-decoration: none; >a:active, a:hover < color: #670f08; text-decoration: underline; >img < border: 0px solid white; margin: 0px; padding: 0px; >.clear < clear: both; >/* Text Formatting */ h1 < font-size: 20pt; color: #212121; font-weight: lighter; >h2 < font-size: 20pt; color: #212121; font-weight: lighter; >h3 < font-size: 20pt; color: #212121; font-weight: lighter; >blockquote < font-size: 12pt; font-style: italic; margin: 30px 30px 30px 0; padding: 0 0 0 20px; border-left: 1px solid #ccc; >/* Clear */ .clearBoth < clear: both; >/* Page Wrapper*/ #pageWrapper < width: 100%; height: 100%; >/* Page Top */ #pageTop < width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 100; overflow: hidden; >#topTitle < background-color: #262626; color: #CCCCCC; width: 100%; height: 100%; float: left; margin-right: -250px; >#topRight < background-color: #262626; color: #CCCCCC; width: 250px; height: 100%; float: right; >/* Page Main */ #pageMain < background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right; width: 100%; margin-top: 100px; overflow: hidden; >/* Main Content */ #mainContent < width: 100%; height: 100%; float: left; margin-right: -250px; >.contentClear < margin-right: 250px; >.contentPost < margin: 40px; >.postTitle <> .postContent <> .postExtras <> /* Main Sidebar */ #mainSidebar < background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right; color: #CCCCCC; width: 220px; margin: 15px; height: 100%; float: right; >#mainSidebar h1 < color: #CCCCCC; font: 14pt'Roboto', sans-serif; text-align: center; margin: 2px; padding: 2px; >#mainSidebar h1:before < content: "‹"; position: relative; left: -2px; >#mainSidebar h1:after < content: "›"; position: relative; left: 2px; >.sidebarContent <> .sidebarNav < margin: 0; padding: 0; list-style: none; >.sidebarNav li:before < content: "//"; position: relative; left: 2px; >/* Page Footer */ #pageFooter < width: 100%; height: 100px; overflow: hidden; >#footerContent < background-color: #262626; color: #CCCCCC; width: 100%; height: 100%; float: left; margin-right: -250px; >#footerRight

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

Объяснение краха маржи

Вы установили div#pageTop в position:fixed и вы добавили margin-top:100px в div#pageMain чтобы вывести его ниже фиксированного заголовка. Эта маржа рушится с div#pageWrapper и в конечном итоге с .

Так как установлен на height:100% а разваливающий маркер подталкивает его на 100 пикселей, то достигает 100px слишком высокого уровня и вызывает вертикальную полосу прокрутки в браузере. Высота 100% + 100px всегда будет больше высоты окна и всегда будет иметь полосу прокрутки.

Ниже изображено изображение верхней части . Обратите внимание, что он не начинается в верхней части страницы, как ожидалось. Он начинается на 100 пикселей вниз, ниже заголовка:

Как исправить сворачивающуюся маржу

Существует несколько способов предотвращения краха полей. В этом контексте я предлагаю изменить margin-top:100px на div#pageMain в дополнение:

Это останавливает разметку поля и возвращает в верхнюю часть окна, где оно принадлежит:

Теперь высота составляет 100% от окна, и нет постоянной полосы прокрутки.

/* Basic Style */ html, body < height: 100%; >body < background-color: #FFFFFF; font-family: 'Roboto', sans-serif; font-size: 12pt; font-weight: 100; color: #212121; text-decoration: none; line-height: 100%; height: 100%; margin: 0px 0px 0px 0px; >a:link < color: #42b4da; font-family: 'Roboto', sans-serif; text-decoration: none; >a:visited < color: #002946; text-decoration: none; >a:active, a:hover < color: #670f08; text-decoration: underline; >img < border: 0px solid white; margin: 0px; padding: 0px; >.clear < clear: both; >/* Text Formatting */ h1 < font-size: 20pt; color: #212121; font-weight: lighter; >h2 < font-size: 20pt; color: #212121; font-weight: lighter; >h3 < font-size: 20pt; color: #212121; font-weight: lighter; >blockquote < font-size: 12pt; font-style: italic; margin: 30px 30px 30px 0; padding: 0 0 0 20px; border-left: 1px solid #ccc; >/* Clear */ .clearBoth < clear: both; >/* Page Wrapper*/ #pageWrapper < width: 100%; height: 100%; >/* Page Top */ #pageTop < width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 100; overflow: hidden; >#topTitle < background-color: #262626; color: #CCCCCC; width: 100%; height: 100%; float: left; margin-right: -250px; >#topRight < background-color: #262626; color: #CCCCCC; width: 250px; height: 100%; float: right; >/* Page Main */ #pageMain < background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right; width: 100%; padding-top: 100px; overflow: hidden; >/* Main Content */ #mainContent < width: 100%; height: 100%; float: left; margin-right: -250px; >.contentClear < margin-right: 250px; >.contentPost < margin: 40px; >.postTitle <> .postContent <> .postExtras <> /* Main Sidebar */ #mainSidebar < background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right; color: #CCCCCC; width: 220px; margin: 15px; height: 100%; float: right; >#mainSidebar h1 < color: #CCCCCC; font: 14pt'Roboto', sans-serif; text-align: center; margin: 2px; padding: 2px; >#mainSidebar h1:before < content: "‹"; position: relative; left: -2px; >#mainSidebar h1:after < content: "›"; position: relative; left: 2px; >.sidebarContent <> .sidebarNav < margin: 0; padding: 0; list-style: none; >.sidebarNav li:before < content: "//"; position: relative; left: 2px; >/* Page Footer */ #pageFooter < width: 100%; height: 100px; overflow: hidden; >#footerContent < background-color: #262626; color: #CCCCCC; width: 100%; height: 100%; float: left; margin-right: -250px; >#footerRight

Ответ jlane09 также решает эту проблему. Он имеет силу, потому что он работает. Однако, на мой взгляд, этот ответ недостаточно объясняет причину проблемы. Кроме того, использование height:auto может вызвать дополнительные проблемы в некоторых контекстах (например, с использованием высот на основе процентов для дочерних элементов).

Липкий Нижний колонтитул

Создание “липкого” нижнего колонтитула – отдельная проблема. Если вы хотите, чтобы нижний колонтитул всегда придерживался нижней части окна, независимо от того, нужно ли прокручивать окно, см. Яркий нижний колонтитул Ryan Fait (знаменитый). Это требует некоторой структуры, но это того стоит.

Я построил вам рудиментарное демо, ниже:

/* Basic Style */ html, body < height: 100%; margin: 0; >/* Page Wrapper*/ #pageWrapper < min-height: 100%; height: auto !important; height: 100%; margin: 0 0 -160px; >/* Page Top */ #pageTop < width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 100; >#topTitle < background-color: #262626; color: #CCCCCC; width: 100%; height: 100%; float: left; margin-right: -250px; >#topRight < background-color: #262626; color: #CCCCCC; width: 250px; height: 100%; float: right; >/* Page Main */ #pageMain < background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right; width: 100%; padding-top: 100px; >/* Main Content */ #mainContent < width: 100%; height: 100%; float: left; margin-right: -250px; >.contentClear < margin-right: 250px; >.contentPost < margin: 40px; >.postTitle <> .postContent <> .postExtras <> /* Main Sidebar */ #mainSidebar < background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right; color: #CCCCCC; width: 220px; margin: 15px; height: 100%; float: right; >#mainSidebar h1 < color: #CCCCCC; font: 14pt'Roboto', sans-serif; text-align: center; margin: 2px; padding: 2px; >#mainSidebar h1:before < content: "‹"; position: relative; left: -2px; >#mainSidebar h1:after < content: "›"; position: relative; left: 2px; >.sidebarContent <> .sidebarNav < margin: 0; padding: 0; list-style: none; >.sidebarNav li:before < content: "//"; position: relative; left: 2px; >/* Page Footer */ #pageFooter < width: 100%; background-color: #262626; >#footerContent < color: #CCCCCC; width: 100%; float: left; margin-right: -250px; >#footerRight < color: #CCCCCC; width: 250px; height: 100%; float: right; >#pageFooter, #footer_push < height: 160px; >.clearfix:before, .clearfix:after < content: ""; display: table; >.clearfix:after < clear: both; >.clearfix < zoom: 1; /* ie 6/7 */ >

Это потому, что у вас есть высота: 100%; на тэгах html и body. Кроме того, он находится в вашем классе pageWrapper. Это говорит браузеру, чтобы высота страницы была, по крайней мере, высотой видового экрана, независимо от того, что, а затем сообщает вашему внутреннему классу pageWrapper, что бы соответствовать этой высоте, независимо от того, что.

Я бы предложил создать html height: auto; для начала.

Я думаю, может быть, вы намеревались, чтобы нижний колонтитул черного фона находился внизу, без пробела внизу, не так ли? Вы можете сделать это, сняв секцию нижнего колонтитула из обертки страницы, поместите ее прямо перед тегом body body и добавьте этот css:

Для ID pageFooter добавьте позицию css: исправлено; внизу: 0;

/* Basic Style */ html, body < height: 100%; >body < background-color: #FFFFFF; font-family: 'Roboto', sans-serif; font-size: 12pt; font-weight: 100; color: #212121; text-decoration: none; line-height: 100%; height: 100%; margin: 0px 0px 0px 0px; >a:link < color: #42b4da; font-family: 'Roboto', sans-serif; text-decoration: none; >a:visited < color: #002946; text-decoration: none; >a:active, a:hover < color: #670f08; text-decoration: underline; >img < border: 0px solid white; margin: 0px; padding: 0px; >.clear < clear: both; >/* Text Formatting */ h1 < font-size: 20pt; color: #212121; font-weight: lighter; >h2 < font-size: 20pt; color: #212121; font-weight: lighter; >h3 < font-size: 20pt; color: #212121; font-weight: lighter; >blockquote < font-size: 12pt; font-style: italic; margin: 30px 30px 30px 0; padding: 0 0 0 20px; border-left: 1px solid #ccc; >/* Clear */ .clearBoth < clear: both; >/* Page Wrapper*/ #pageWrapper < width: 100%; height: 100%; >/* Page Top */ #pageTop < width: 100%; height: 100px; position: fixed; top: 0; left: 0; z-index: 100; overflow: hidden; >#topTitle < background-color: #262626; color: #CCCCCC; width: 100%; height: 100%; float: left; margin-right: -250px; >#topRight < background-color: #262626; color: #CCCCCC; width: 250px; height: 100%; float: right; >/* Page Main */ #pageMain < background: #ffffff url(../style/images/sidebarBackground.gif) repeat-y right; width: 100%; margin-top: 100px; overflow: hidden; >/* Main Content */ #mainContent < width: 100%; height: 100%; float: left; margin-right: -250px; >.contentClear < margin-right: 250px; >.contentPost < margin: 40px; >.postTitle <> .postContent <> .postExtras <> /* Main Sidebar */ #mainSidebar < background: #262626 url(../style/images/sidebarBackground.gif) repeat-y right; color: #CCCCCC; width: 220px; margin: 15px; height: 100%; float: right; >#mainSidebar h1 < color: #CCCCCC; font: 14pt'Roboto', sans-serif; text-align: center; margin: 2px; padding: 2px; >#mainSidebar h1:before < content: "‹"; position: relative; left: -2px; >#mainSidebar h1:after < content: "›"; position: relative; left: 2px; >.sidebarContent <> .sidebarNav < margin: 0; padding: 0; list-style: none; >.sidebarNav li:before < content: "//"; position: relative; left: 2px; >/* Page Footer */ #pageFooter < width: 100%; height: 40px; overflow: hidden; >#footerContent < background-color: #262626; color: #CCCCCC; width: 100%; height: 100%; float: left; margin-right: -250px; >#footerRight < background-color: #262626; color: #CCCCCC; width: 250px; height: 100%; float: right; >#footerContent h1 < position: absolute; right: 40%; font-size: 12px; color: #ccc; >#footerContent ul < padding: 0; margin: 0; margin-left: 20px; >#footerContent ul li < display: inline; line-height: 40px; >/* ADD THIS TO FIX FOOTER TO BOTTOM */ #pageFooter

“Вопрос” класса “div” – 2032 пикселей. Под этим div называется “ответ”, который представляет собой пустой div, который равен 728 X 870px. Белое пространство можно устранить, уменьшив ответ div, чтобы устранить часть белого пространства. Однако некоторые пробелы из-за области ответа. Чтобы узнать, как изменить CSS, посетите страницу http://www.w3schools.com/cssref/pr_dim_height.asp. Код для поиска этих divs находится под телом, контейнером, контентом, itemscope, а затем с главной панелью.

Я исправил его, удалив line-height:100% от вашего body . Добавьте height:100vh к вам #mainPage .

Источник

Пустое пространство внизу сайта

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

Не стесняйтесь использовать исходный вид страницы и т. Д. Для просмотра моих CSS и HTML. Я не веб-дизайнер в душе, я только взял один класс, и это медленно соединяется. Пожалуйста, дайте мне знать, если вы нашли что-нибудь, что могло бы это исправить.

• добавление высоты: 100% к моему телу
• добавление переполнения: скрыто в моем contentFooter
• добавление переполнения: скрыто! важно для моего contentFooter

6 ответов

У меня было пустое пространство внизу всех моих сайтов; Вот как я решил вопрос:

Первое и лучшее, что вы можете сделать при отладке таких проблем CSS, это добавить:

Эта строка CSS помещает красную рамку вокруг всех ваших элементов HTML.

У меня было пустое место внизу моей страницы из-за неисправного расширения Chrome, которое добавляло div #dp_swf_engine внизу моей страницы:

Без красной рамки я бы никогда не заметил 1px div. Затем я избавился от неисправного расширения и поставил display:none на #dp_swf_engine в качестве вторичной меры. (Кто знает, когда это может вернуться, чтобы добавить случайный пробел внизу моей страницы для всех моих страниц и приложений?!)

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

Дополнительное пространство обусловлено фиксированной высотой нижнего колонтитула. Установка на height в auto должен решить проблему.

Примечание: я тестирую в Maxthon.

Во-первых, ваш фон div# не занимает всю страницу, вместо этого занимает наименьшее пространство, которое может, и поскольку нижний колонтитул находится внутри, он не может выходить за рамки этого. Чтобы исправить это, я решил добавить

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

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

PS. У вас будут проблемы с обрезкой внизу страницы, если окно слишком маленькое, но они все равно будут возникать, потому что div#contentBarrier имеет минимальную высоту меньше div#background ,

Макет вашей страницы составляет 905 пикселей в высоту, поэтому он будет точно соответствовать размеру окна браузера. Это может произойти с определенным разрешением с определенной операционной системой и конкретным браузером, но для большинства людей это не так.

Вы можете сделать body элемент занимает всю высоту браузера, добавив это в CSS:

Затем вы можете разместить нижний колонтитул в нижней части body элемент и добавьте отступ для содержимого, чтобы прокрутка работала, как ожидалось, когда окно меньше:

#contentBarrier < padding-bottom: 45px; >#background > hr < position: absolute; width: 100%; bottom: 42px; >#contentFooter

Для тех, кто имеет эту проблему и не знает, что делать, или ответы выше не ответили на ваш вопрос:

Я не вижу никакого «белого пространства» в нижней части вашего сайта, если под «белым пространством» вы подразумеваете «белое пространство». Какой браузер вы используете? Возможно расширение браузера изменяет вашу страницу на стороне клиента. Вы также можете использовать что-то вроде http://browsershots.org/, чтобы проверить масштаб вашей проблемы.

Если вы имеете в виду пространство внутри нижнего колонтитула, вам нужно изменить высоту, определенную в этом объявлении CSS:

РЕДАКТИРОВАТЬ: Работает над тем, чтобы вы прикрепили нижний колонтитул вниз

#contentFooter < height: 42px; background-color: #9db0ae; position: fixed; bottom: 0; width: 100%; >#contentBarrier

Также переместите свой апельсин hr в ваш нижний колонтитул. Или, что еще лучше, переключитесь на использование границ CSS.

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

Источник