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

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

div {
    float: left;
}
.second {
    background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

Я хочу, чтобы div 'view' расширялся до всей ширины, доступной после того, как div дерева заполнил необходимое пространство. В настоящее время мой div 'view' изменен для контента, содержащего его Также хорошо, если оба divs занимают целую высоту

Не дублировать отказ:

Развернуть div до максимальной ширины, когда float: left установлен потому что левая имеет фиксированную ширину.

Справка с div-make div соответствует оставшейся ширине потому что мне нужны два столбца, выровненные влево

+499
11 авг. '09 в 12:46
источник поделиться
21 ответ

Решение этой проблемы на самом деле очень простое, но совсем не очевидное. Вы должны вызвать нечто, называемое "контекстом блочного форматирования" (BFC), которое взаимодействует с плавающими определенным образом.

Просто возьмите этот второй div, удалите float и сделайте его overflow:hidden вместо этого overflow:hidden. Любое значение переполнения, отличное от visible, превращает установленный блок в BFC. BFC не позволяют поплавкам-потомкам избегать их, и при этом они не позволяют вторжению в них родных/родовых поплавков. Чистый эффект здесь заключается в том, что плавающий div будет делать свое дело, тогда второй div будет обычным блоком, занимающим всю доступную ширину, кроме занимаемой float.

Это должно работать во всех текущих браузерах, хотя вам может потребоваться вызвать hasLayout в IE6 и 7. Я не могу вспомнить.

Демонстрации:

+971
19 нояб. '09 в 23:16
источник

Связанные вопросы


Похожие вопросы

Я только что открыл магию флексбоксов (дисплей: флекс). Попробуй это:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Гибкие коробки дают мне контроль, который я хотел бы иметь в течение 15 лет. Наконец-то здесь! Дополнительная информация: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

+80
28 мая '15 в 2:38
источник

Это будет хорошим примером того, что тривиально делать с таблицами и трудно (если не невозможно, по крайней мере в смысле кросс-браузера) делать с CSS.

Если оба столбца были фиксированной шириной, это было бы легко.

Если один из столбцов был фиксированной шириной, это было бы немного сложнее, но вполне выполнимо.

В обоих столбцах переменной ширины IMHO вам нужно просто использовать таблицу с двумя столбцами.

+26
11 авг. '09 в 12:49
источник

Проверьте это решение

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}
<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>
+21
13 янв. '14 в 16:22
источник

Здесь это может помочь...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>
+15
11 авг. '09 в 13:16
источник

Используйте calc:

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}
<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

Проблема в том, что все ширины должны быть явно определены, либо как значение (px и em работают нормально), либо как процент от чего-то явно определенного самого себя.

+13
09 мар. '16 в 6:53
источник

Решение Flexbox

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

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}
<div class="wrapper">
  <div style="background: #fc9;">Tree</div>
  <div class="second" style="background: #ccc;">View</div>
</div>

Примечание. Добавьте префиксы поставщиков Flex, если это требуется поддерживаемыми браузерами.

+12
06 нояб. '16 в 8:12
источник

Я не понимаю, почему люди готовы так усердно работать, чтобы найти решение с чистым CSS для простых макетов столбцов, которые SO EASY используют старый тег TABLE.

У всех браузеров все еще есть логика компоновки таблиц... Назовите меня, возможно, динозавром, но я говорю, пусть это поможет вам.

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

Гораздо менее рискованно с точки зрения совместимости между браузерами.

+5
09 дек. '10 в 6:30
источник

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>
+3
19 янв. '11 в 9:25
источник

Вы можете попробовать CSS Grid Layout.

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}
<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>
+3
15 авг. '17 в 16:00
источник

Несколько другая реализация,

Две панели div (содержимое + дополнительная), бок о бок, content panel расширяются, если extra panel нет.

jsfiddle: http://jsfiddle.net/qLTMf/1722/

+1
06 февр. '14 в 11:58
источник

Пэт - Вы правы. Поэтому это решение удовлетворит и "динозавров", и современников. :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}
<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>
+1
01 июн. '11 в 9:17
источник

Спасибо за пробную версию Simpl.css!

Не забудьте обернуть все ваши столбцы в ColumnWrapper так.

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

Я собираюсь выпустить версию 1.0 Simpl.css, чтобы помочь распространить это слово!

+1
13 дек. '09 в 1:02
источник

Если ширина другого столбца фиксирована, как насчет использования CSS-функции calc работающей для всех распространенных браузеров:

width: calc(100% - 20px) /* 20px being the first column width */

Таким образом, ширина второго ряда будет рассчитана (т.е. Оставшаяся ширина) и применена соответственно.

+1
30 окт. '15 в 21:11
источник

flex-grow - определяет способность элемента flex расти в случае необходимости. Он принимает значение без единицы, которое служит пропорцией. Он определяет, какое количество доступного пространства внутри гибкого контейнера должно занимать элемент.

Если во всех элементах flex-grow установлено значение 1, оставшееся пространство в контейнере будет распределено поровну между всеми дочерними элементами. Если один из дочерних элементов имеет значение 2, оставшееся пространство займет в два раза больше места, чем остальные (или попытается, по крайней мере). Подробнее здесь

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}
<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>
+1
08 нояб. '18 в 14:23
источник

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

Я разработал бесплатный инструмент для понимания и разработки макетов с помощью flexbox. Проверьте это здесь: http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}
<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>
0
12 авг. '18 в 8:06
источник

Я написал функцию javascript, которую я вызываю из jQuery $(document).ready(). Это проанализирует все дочерние элементы родительского div и обновит только правильное большинство дочерних элементов.

HTML

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

Javascript

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}
0
11 мар. '17 в 4:43
источник

Я не уверен, что это ответ, который вы ожидаете, но почему бы вам не установить ширину дерева в "auto" и ширину "View" до 100%?

0
11 авг. '09 в 12:49
источник

Посмотрите на доступные рамки компоновки CSS. Я бы рекомендовал Simpl или немного более сложную структуру Blueprint.

Если вы используете Simpl (который включает в себя импорт только одного файла simpl.css), вы можете сделать это:

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

для макета 50-50 или:

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

для 25-75 единиц.

Это просто.

0
11 авг. '09 в 13:11
источник

Вы можете использовать библиотеку W3 CSS, которая содержит класс rest который делает именно это:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

Не забудьте связать библиотеку CSS в header страницы:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Вот официальная демоверсия: W3 School Tryit Editor

0
07 авг. '17 в 13:40
источник

Если обе ширины переменной длины, почему вы не вычисляете ширину с помощью некоторых скриптов или серверов?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>
-3
11 авг. '09 в 12:52
источник

Посмотрите другие вопросы по меткам или Задайте вопрос