CSS позиция абсолютная проблема полной ширины

у меня есть 2 дива и дл:

<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;
}

navigaation получает 100% обертки, которая имеет максимальную ширину 1003px. я хочу, чтобы это растянуть до максимума, не меняя обертку и заголовок ДИВС.

это возможно?

5 55
html css

5 ответов:

вы можете установить как 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

189

вам нужно добавить position:relative к элементу # wrap.

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

16

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

0

Я не знаю, если это то, что вы хотите, но попробуйте удалить overflow: hidden from #wrap

0

Make #site_nav_global_primary позиционируется как фиксированная и установленная ширина до 100% и желаемой высоты.

0