Div, который заполняет ширину экрана внутри центрированного Div

Question

Возможно ли это? У меня Div2 специально расположен внутри Div1. Теперь единственное, что я хотел бы, чтобы Div2 охватывал ширину всего экрана, вместо того чтобы просто охватывать ширину Div1.

|----------------------------------------------------------| 
|      Browser       | 
|               | 
|               | 
|               | 
|               | 
|   --------------------------------    | 
|   |  Div1 (relative)  |    | 
|   |        |    | 
|   |        |    | 
|-----------|------------------------------|---------------| 
|   |   Div2    |    | 
|   |(currently absolute & in Div1)|    | 
|-----------|------------------------------|---------------| 
|   |        |    | 
|   |        |    | 
|   |        |    | 
|   |        |    | 
|   --------------------------------    | 
|               | 
|               | 
|               | 
|----------------------------------------------------------| 

Это CSS у меня сейчас:

.page{ 
     height: 300px; 
     width: 400px;} 

.Div1{ 
    float:left; 
     left: 50%; 
    height:200px; 
    width:100px; 
    position:relative; 
     background-color: red; 
} 

.Div2{ 
    position:absolute; 
    top:21px; 
    width:100%; 
    height:24px; 
     background-color: yellow; 
}​ 

Вот JSFiddle для моей текущей задачи: http://jsfiddle.net/vBqgT/21/ Спасибо.

Answer 1

Вам не нужно CSS3 сделать достижения этой цели. Так как div2 находится внутри div1, его ширина ограничена div1. Поэтому, чтобы сделать div2 шире div1:

.Div2{ 
    width:150%; 
} 

Вы также можете сделать это:

.Div2{ 
    left: -25%; 
} 

отрегулировать где левый край div2 начинается.

См. http://jsfiddle.net/jsxvK/.

Но если главная цель для div2 взять на себя свойство тела (page в вашем случае), рассмотреть вопрос о создании разметки для div2 внутри page, но не внутри div. Затем отрегулируйте верхнее положение div2, чтобы переместить его вверх или вниз в документе.

Answer 2

Уверенный, что вы можете это сделать, но положение div2 задано относительно div1 (таким образом, left: 0, если вы поместите его влево, выровненное на div1), если вы делаете div2 дочерним элементом div1. Если вы не хотите размещать его относительно div1, вы можете либо сделать div2 родным, либо div1, либо вы можете удалить position: relative; из div1. Другой альтернативой является использование фиксированной позиции на div2. Все они имеют побочные эффекты, которые могут быть нежелательны ...

Иногда необходимо использовать javascript, чтобы получить именно то, что вы хотите. Скажем, например, что вы хотите выровнять по div1 на одной оси и с телом на другом. Тогда может потребоваться использование сценариев.

Answer 3

Попробуйте CSS:

.page{ 
     height: 300px; 
     width: 100%; 
    border: 0px solid red; 
} 

.Div1{ 
    margin: 0 auto; 
    height:200px; 
    width:100px; 
    background-color: red; 
} 

.Div2{ 
    position:absolute; 
    top:21px; 
    width:100%; 
    height:24px; 
    background-color: yellow; 
    left:0; 
} 

Вот демо: http://jsfiddle.net/ongisnade/SqG3c/