Как отобразить элементы HTML, которые охватывают ширину страницы внутри элементов с ограниченной шириной?

Question

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

Это самое простое изображение, которое показывает желаемый эффект:

Предполагая некоторый HTML-код, подобный следующему:

<!-- This is the Big Black width restricted box -->
<div class="enclosingBox">
    <div class="topnav">
        Exclusives
        Shop
        The Brand
        Press
        Vault
    </div>

    <div>
        <p>This is some stuff in the middle</p>
        <p>Some Other Stuff in the middle</p>
    </div>

    <div class="bottomnav">
        SHOE PIC 1
        SHOE PIC 2
        SHOE PIC 3
        SHOE PIC 4
    </div>
</div>

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

Answer 1

Что-то вроде этого кажется довольно близко.

http://jsfiddle.net/Fq32a/2/

html, body { width: 100%; position: relative; }

.topnav {
    position: absolute; 
    top: 100px; 
    height: 75px;
    left: 0px; 
    right: 0px;
    border: 1px dotted gray;
    text-align: center;
}

.bottomnav {
    position: absolute; 
    bottom: 20px; 
    height: 50px;
    left: 0px; 
    right: 0px;
    border: 1px dotted gray;
    text-align: center;
}

Answer 2

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

<div style="width:800px;margin-left:auto;margin-right:auto;">
 ... all the top stuff, 100% wide and smaller
</div>

<div style="width:100%;">
<div style="width:800px;margin-left:auto;margin-right:auto;">
... your nav stuff
</div>
</div>

<div style="width:800px;margin-left:auto;margin-right:auto;">
... you're body ...
</div>

<div style="width:100%;">
<div style="width:800px;margin-left:auto;margin-right:auto;">
... bottom nav stuff
</div>
</div>

<div style="width:800px;margin-left:auto;margin-right:auto;">
... all your feets are belong to div
</div>

Answer 3

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

Answer 4

Как это?

<div id="navigation">
   this is the navigation with 100% width.
</div>
<div id="width940">
  this is the container with 940px width
</div>

<!-- the css -->
#navigation {
  width:100%;
  position:absolute;
  top:50px;
  height:32px;
}
#width940 {
  width:940px;
  margin:0 auto;
}