Проблема абсолютної повної ширини позиції CSS


80

у мене є 2 divs і dl:

<div id="wrap">
 <div id="header">
  <dl id="site_nav_global_primary">

і це мій стиль:

#wrap {
margin:0 auto;
width:100%;
min-width:760px;
max-width:1003px;
overflow:hidden;
}

#header {
width:100%;
position:relative;
float:left;
padding-top:18px;
margin-bottom:29px;
}

#site_nav_global_primary {    
float:right;
margin-right:18px;
margin-bottom:11px;
margin-left:18px;
}

Тепер я хочу змінити site_nav_global_primary, щоб мати повну ширину екрана, не змінюючи обтікання та заголовка. але коли я намагаюся:

#site_nav_global_primary {    
position: absolute;
width:100%;
top:0px;
left:0px;
}

Навігація отримує 100% обгортки, яка має максимальну ширину 1003px. я хочу, щоб це розтягнулося до максимуму, не змінюючи обгортки та заголовки div.

Чи можливо це?


Чому ви хочете, щоб він був ширшим, ніж контейнер? Для мене здається, що вам слід винести dl за межі div, що містить, якщо ви не хочете, щоб він був пов'язаний їхніми обмеженнями.
DoctorMick

Відповіді:


245

Ви можете встановити як для властивості, так leftі rightдля 0. Це зробить div розтягуванням до ширини документа, але вимагає, щоб не був розміщений батьківський елемент (що не так, якщо бачити як #headerє position: relative;)

#site_nav_global_primary {    
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

Демонстрація на: http://jsfiddle.net/xWnq2/ , де я витягував position:relative;з#header


1
просто sidenote, ліворуч та праворуч також приймають від'ємні значення, див .: jsfiddle.net/xWnq2/1, але вимагає від батьків не переповнення: hidden; - це не дозволить вам легко змусити його розтягнутися до "максимуму", однак
xec

Тьфу, нарешті, це виправило мою дивну ie11проблему, коли абсолютні та фіксовані div, де роблять себе шириною 3 тис. Пікселів ...
Філ

23

Вам потрібно додати position:relativeдо елемента #wrap.

Коли ви додасте це, усі дочірні елементи будуть розташовані в цьому елементі, а не у вікні браузера.


спробував, не працює .. все одно отримуємо 100% від максимального 1003px
Том

@ Том будь-яке поле, відступ, межі?
Анджей Ошмяловський,

4

У мене схожа ситуація. У моєму випадку у нього немає батьків з позицією: відносний. Просто вставте моє рішення сюди для тих, хто може знадобитися.

position: fixed;
left: 0;
right: 0;

0

Зробити #site_nav_global_primaryпозиціонуванням фіксованим і встановити ширину 100% та бажану висоту.


-1

Я не знаю, чи це те, що ви хочете, але спробуйте видалити переповнення: приховане від #wrap


Я скопіював ваш код, запустив i FX, видаливши переповнення з #wrap, і це працює
Sylwia
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.