ширина обертки: 100%; работает хорошо, когда браузер развернут, но когда он не развернут, он отключается

Question

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

Вот оболочка CSS.

#wrapper-main { background-image:url(images/structure/bg.png); background-color:#e8eef1; background-repeat:repeat-x; display:table; width:100%; margin:0; padding:0; }

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

http://eosa.co.cc/themes/osoa/index.html

Answer 1

Проблема возникает по строке 214 в файле styles.css, где вы определяете:

.onethirdbox { width:296px; float:left; margin:0 40px 40px 0; position:relative }

Если вы добавите все это, у каждого блока будет ширина 296 + 40 = 336 пикселей.3 * 336 = 1008 пикселей ... что шире, чем ваша ширина контента на 968 пикселей.Но даже если вы уменьшите поле до 0, вам все равно придется уменьшить ширину до 250px, чтобы избавиться от эффекта, который вам не нравится ... это, конечно, заставляет третьи коробки выглядеть смешно ... так ясночто-то еще происходит ... Я не уверен, что это сейчас, но это то, где вы должны начать .... Другими словами, если вы замените строку выше на:

.onethirdbox { width:250px; float:left; margin:40px 0; position:relative }

Проблема, о которой вы писали, исчезает (и появляется новая).

Чтобы грубо заставить решения, вместо того, чтобы менять поле, вы можете просто сделать невидимым переполнение #footerwrapper:

#footerwrapper {
    overflow:hidden;
}

Это излечивает симптом, но фактически не решает проблему.