Заполните пространство div - PullRequest
Новая
       25

Заполните пространство div

6 голосов
/ 20 июня 2011

Я бы хотел, чтобы элемент заполнил оставшееся пространство родительского div.Мне удалось сделать это, вы можете увидеть здесь "ссылка удалена", но заполнение div (справа) находится под левым div.Я хочу, чтобы правый div начинался там, где заканчивается левый div.

Надеюсь, это имеет смысл. 

    <html>
    <head>
    <title></title>
    <style type="text/css">
    #left {
        float:left;
        width:180px;
        background-color:#ff0000;
        height:20px;
    }
    #right {
        width: 100%;
        background-color:#00FF00;
        height:30px;
    }
    </style>
    </head>

    <body>
    <div>
    <div id="left">Nav</div>
    <div id="right">This is the space I need to fill but not go underneath the nav div</div>
    </div>
    </body>
    </html>

Ответы [ 2 ]

12 голосов
/ 20 июня 2011

На #right, просто удалите width: 100% и добавьте overflow: hidden.

См .: http://jsfiddle.net/hJzJf/ - (я предполагаю, что ваши height только для целей тестирования)

Почему это работает?

См .: http://colinaarts.com/articles/the-magic-of-overflow-hidden/#making-room-for-floats

3 голосов
/ 20 июня 2011

Установите margin-left: 180px; в элементе #right. Это сместит его на ширину первого элемента.

http://jsfiddle.net/DHSej/

...