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

87

Как я могу заставить 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пополнить остаток?

html css раклос
источник
Чтобы получить актуальный правильный ответ, измените выбранный лучший ответ на ответ Адриена Би.
edwardtyl
Мне нужно было наоборот, div с фиксированной шириной по центру и жидкость вне div. Я добавил ответ внизу, если он кому-то еще нужен.
damndaewoo

Ответы:

63

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

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

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

Обратите внимание, что «средний div» идет после «правого div» в HTML.

Ли
источник
1
Я думаю, что нашел еще лучшее решение, основанное на вашем (отличном) решении :) см. Ниже в ответе, который я предоставляю
Адриан Бе
есть ли способ сделать это, не меняя порядок элементов? т.е. левый-div, средний-div, правый-div. Это важно, если вы хотите делать разные вещи на экранах разных размеров.
Элиэзер Штайнбок,
Да, этот порядок левого-правого-среднего действительно является уловкой. Это запрещает правому div не находиться под двумя div, верно?
Ansjovis86 02
49

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

Введение:

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

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

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

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

Код с неглавным макетом:

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

Живая демонстрация на 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)
  • Хром 20, Хром 25, Хром 30, Хром 33,
  • Опера 20
Адриан Бе
источник
2
Я бы рекомендовал всем разработчикам использовать этот метод, тем более что адаптивный веб-дизайн стал необходимостью. :)
aullah
1
Осторожнее с этим. В некоторых случаях полоса прокрутки появится в div content__middle в Firefox, если высота не точна из-за переполнения: auto;
Джейсон
Привет, Джейсон, это очень интересно, спасибо за указание на это. Можете ли вы предоставить jsfiddle, чтобы показать живой пример, когда это произойдет?
Адриан Би
это потому, что overflowсоздает контекст форматирования блока? будет display: flexиметь такой же эффект?
Jayen
1
Ага, это так. developer.mozilla.org/en-US/docs/Web/Guide/CSS/… был очень полезным. в конечном итоге использовал overflow-y: hiddenкак это а) разрешенную ширину, которая должна быть установлена, б) имеет лучшую поддержку браузера и в) не было таблицей
Джейен
39

Flex-боксы - это отличное решение. Я уже десять лет хотел чего-то подобного из 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>

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

BT
источник
Flexbox великолепен, но он занимает ровно столько места, сколько ему нужно, вместо всего оставшегося места. Таким образом, я выбрал решение overflow: auto.
ThinkBonobo
@ThinkBonobo, что ты имеешь в виду под словом "это"? Сам гибкий блок будет действовать как «блок», а элементы внутри гибкого блока определенно могут занимать больше места, чем требуется.
BT
@BT это означает главный центральный div. Это определенно решение, которое работает во многих случаях, но не для моего конкретного случая использования.
ThinkBonobo,
1
@ThinkBonobo Bet Я мог бы заставить его работать для вас, если бы вы разместили jsFiddle
BT
23

Для этого используйте свойство CSS Flexbox flex-grow .

.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>
Развернуть фрагмент

Реджи Пинкхэм
источник
1
Лучший ответ tbh. Работает на 4 года позже и чище, чем другие решения. +1
Гарри Джей
4

Хотя 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>

Этот метод работает как по волшебству, но вот объяснение :)

Поиграйте с подобным образцом здесь.

Санни Р Гупта
источник
4

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

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

Авишек Бозе
источник
1

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

#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);
}
<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>
Развернуть фрагмент

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

width: calc(50% - [half of center width]px);
черт возьми
источник