Отступ CSS справа, когда размер окна меньше.

Question

У меня есть отступ справа от моих архивов и страницы поиска, и я считаю, что это связано с моим элементом тела, однако я не совсем уверен, что на этих страницах отличается из других страниц, на которых все отлично подходят для стиля, поскольку все они используют один и тот же формат. It's a wordpress website. Как я уже сказал, это происходит только с этой страницей, а страница поиска и все остальные в порядке, поэтому я смущен относительно того, что она делает.

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; } 

body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;} 

header { width: 960px; height: auto; margin: 0 auto; display: block;} 

#container { width: 960px; margin: 20px auto; padding: 0 1.5em;} 

aside { width: 260px; height: auto; float: left; position: relative;} 

#main { width: 650px; height: auto; float: right; position: relative;} 

#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; } 

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

Я просмотрел этот, но у меня уже есть минимальная ширина. Website has strange whitespace on right side of the page when the browser is resized to a smaller window

Answer 1

В файле style.css в строке 108 удалите атрибут width из тега заголовка, чтобы устранить проблему горизонтальной полосы прокрутки.

Fixed CSS:

header { height: auto; margin: 0 auto; display: block;} 

Для обзора 3D View in Firefox браузера показывает заголовок, как серый бар с корнем вашей проблемы. Другие стили, которые создают текст, не затрагиваются.

Совет: правой кнопкой мыши щелкните выше изображение и вид на новой вкладке, чтобы увидеть в полном размере.

Answer 2

Ах, если бы я понять вашу проблему правильно, по-видимому, что тег header, в частности, его стиль width: 960px, что является причиной этого своеобразного явления. Содержащий div вокруг заголовка, #main, имеет только width: 650px. В результате избыточная ширина заголовка приводит к тому, что он выходит за край div.

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

Вместо того, чтобы фиксировать это, просто удалив width: 960px из стилей заголовка (что может испортить сайт, на котором эта ширина для тегов заголовков на самом деле необходима), я бы предложил добавить класс переопределения ко всем оскорбительным тэгам, возможно на линиях .archive-header { width: auto; }. Но я думаю, решение зависит от вас, поскольку вы, вероятно, знаете сайт лучше, чем я.

Надеюсь, это поможет! (Я действительно так делаю, иначе вы бы все это прочитали ни о чем! Извините, если вы это сделали ...) В будущем попробуйте загрузить Firebug for Mozilla Firefox, в котором есть удобный инспектор элементов, который позволит вам играть со стилями элементов посмотрите, что работает. Это должно помочь вам выявить эти проблемы самостоятельно, чтобы вы могли быстрее их исправить.