Сделайте <div>шириной страницы - PullRequest
Новая
       19

Сделайте <div>шириной страницы

3 голосов
/ 02 сентября 2011

Допустим, у меня есть <div> (#container), который имеет ширину 960 пикселей. Внутри этого <div> я хочу создать еще один <div> (#drawer) шириной окна страницы. В общем, я хотел бы создать <div> внутри <div>, который шире, чем его родительский <div>: 

<div id="container"> // Set at 960 px

<div id="drawer"> // I'd like this to be as wide as the window

</div>
</div>

CSS: 

#content {
top:200px;
position:absolute;
width: 940px;
padding-bottom:100px;
}

#drawer {
????
}

--- Update ---

Привет всем,

Спасибо за все ответы. Думаю, мне следует немного облегчить свой ответ. Смотрите ниже для какого-то визуального описания. Надеюсь, это поможет!

http://f.cl.ly/items/0n2C0B032B1C3i2G390y/div.png

Ответы [ 5 ]

2 голосов
/ 02 сентября 2011

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

#container {
  top:200px;
  width: 940px;
  padding-bottom:100px;
  background-color:rgb(255,0,0);
}

#drawer {
  position:absolute;
  right: 0px;
  left:0px;
  background-color:rgb(0,255,0);
}
1 голос
/ 02 сентября 2011

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

1 голос
/ 02 сентября 2011

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

1 голос
/ 02 сентября 2011

Я не знаю, что вы пытаетесь сделать с этим. Но я думаю, что этот код работает (просто удалив «position: absolute» в #content: 

<html>
    <head>
        <style type="text/css">
            #content {

                top:200px;
                width: 940px;
                padding-bottom:100px;
            }
            body {
                margin:0px;
                padding:0px;
            }
            #drawer {
                background-color:blue;
                top:0px;
                position:absolute;
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <body>
        <div id="content"> 

            <div id="drawer">
                    a
            </div>
        </div>
    </body>

</html>
0 голосов
/ 02 сентября 2011

Я второй комментарий rudeovski ze Bear. Однако, если вы хотите сделать это, вам нужно установить ширину явно (вы не можете полагаться на width: 100%, потому что он всегда будет использовать содержащийся div для справки).

Так что вам понадобится что-то вроде: 

#drawer
{
    width: 1200px;
}

Вы можете использовать небольшой jQuery, чтобы сделать это более динамичным: 

$(function() {
    var windowWidth = $(window).width();
    $('#drawer').css('width', windowWidth);
});
...