Сделайте 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);
— черт возьми
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.