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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

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

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

Ответ 3

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

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

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

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

Используйте 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>

Ответ 7

Решение 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>

Ответ 8

Я не понимаю, почему люди готовы так усердно работать, чтобы найти решение с чистым 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>

Ответ 9

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

Ответ 10

Вы можете попробовать 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>

Ответ 11

Спасибо за пробную версию 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, чтобы помочь распространить это слово!

Ответ 12

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

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

Ответ 13

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

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

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

Ответ 14

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

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

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

Ответ 15

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>

Ответ 16

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

Ответ 17

Посмотрите на доступные рамки компоновки 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 единиц.

Это просто.

Ответ 18

Я написал функцию 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"));
            }
        });
    });
}

Ответ 19

Вы можете использовать библиотеку 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>

Ответ 20

Это довольно легко, используя 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>

Ответ 21

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

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

<div style="width: <=% getViewWidth() %>">View</div>