Сделайте div заполнить оставшуюся ширину

Как я могу заставить div заполнить оставшуюся ширину?

например.

<div id="Main" style="width: 500px;">
  <div id="div1" style="width: 100px;"></div>
  <div id="div2"></div>
  <div id="div3" style="width: 100px; float: right;"></div>
</div>

Как я могу получить div2, чтобы заполнить остаток?

Ответы

Ответ 1

Попробуйте что-то вроде этого:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

divs, естественно, займет 100% ширину своего контейнера, нет необходимости явно устанавливать эту ширину. Добавляя левое/правое поле так же, как и два боковых div, его собственное содержимое вынуждено сидеть между ними.

Обратите внимание, что "средний div" идет после "правый div" в HTML

Ответ 2

Современное решение (октябрь 2014 г.): готово к планировке жидкости

Введение:

Это решение еще проще, чем предложение Leigh. Это на самом деле основано на нем.

Здесь вы можете заметить, что средний элемент (в нашем случае, с классом "content__middle") имеет не какое-либо заданное свойство размерности - без ширины и прошивки, но только a overflow: auto; (см. примечание 1).

Большим преимуществом является то, что теперь вы можете указать max-width и min-width для своих левых и правых элементов. Что фантастично для жидкостных макетов.. следовательно отзывчивый макет: -)

примечание 1: в сравнении с ответом Ли, где вам нужно добавить свойства margin-left и margin-right в класс "content__middle".

Код с нежидкостной компоновкой:

Здесь левый и правый элементы (с классами "content__left" и "content__right") имеют фиксированную ширину (в пикселях): следовательно, называются нежидкой компоновкой.

Live Demo на http://jsbin.com/qukocefudusu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

Код с раскладкой жидкости:

Здесь левый и правый элементы (с классами "content__left" и "content__right") имеют переменную ширину (в процентах), но также минимальную и максимальную ширину: следовательно, называемую компоновкой жидкости.

Живая демонстрация в жидкостной компоновке с параметрами max-width http://jsbin.com/runahoremuwu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

Поддержка браузера

Протестировано на BrowserStack.com в следующих веб-браузерах:

IE7 для IE11
Ff 20, Ff 28
Safari 4.0 (Windows XP), Safari 5.1 (Windows XP)
Chrome 20, Chrome 25, Chrome 30, Chrome 33,
Opera 20

Ответ 3

Flex-box - это решение - и они фантастические. Я давно хотел чего-то подобного из css. Все, что вам нужно, это добавить display: flex в свой стиль для "Main" и flex-grow: 100 (где 100 произвольно - его не важно, чтобы оно было ровно 100). Попробуйте добавить этот стиль (цвета добавлены, чтобы сделать эффект видимым):

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

Подробнее о flex-блоках здесь: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ответ 4

Flexbox решение

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}

<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>

Ответ 5

Несмотря на то, что bit поздняя публикация ответа, это альтернативный подход без использования полей.

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

Этот метод работает как магия, но здесь является объяснением:)\

Скрипт с похожим образцом здесь.

Ответ 6

Div, которому нужно взять оставшееся пространство, должен быть класс. Другие divs могут быть id (s), но они должны иметь ширину.

CSS

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

Следующая ссылка имеет код в действии, который должен решить проблему покрытия оставшейся области.

jsFiddle

Ответ 7

Если я хорошо понимаю, проблема такая же, как и указанная здесь: CSS установить ширину, чтобы заполнить% оставшейся области

вы можете захотеть посмотреть здесь http://www.alistapart.com/articles/holygrail

Ответ 8

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

HTML:

<div id="wrapper">
    <div id="center">
        This is fixed width in the centre
    </div>
    <div id="left" class="fluid">
        This is fluid width on the left
    </div>
    <div id="right" class="fluid">
        This is fluid width on the right
    </div>
</div>

CSS

#wrapper {
    clear: both;
    width: 100%;
}
#wrapper div {
    display: inline-block;
    height: 500px;
}
#center {
    background-color: green;
    margin: 0 auto;
    overflow: auto;
    width: 500px;
}
#left {
    float: left;
}
#right {
    float: right;
}
.fluid {
    background-color: yellow;
    width: calc(50% - 250px);
}

Если изменить ширину элемента #center, вам необходимо обновить свойство width от .fluid до:

width: calc(50% - [half of center width]px);