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

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

501 голосов
/ 11 августа 2009

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

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

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

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

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

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

Ответы [ 21 ]

972 голосов
/ 20 ноября 2009

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

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

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

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

80 голосов
/ 28 мая 2015

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

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

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

26 голосов
/ 11 августа 2009

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

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

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

С обоими столбцами переменной ширины, ИМХО, вам нужно просто использовать таблицу из двух столбцов.

21 голосов
/ 13 января 2014

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

.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>
15 голосов
/ 11 августа 2009

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

<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>
13 голосов
/ 09 марта 2016

Использование 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 работают нормально), либо как процент от чего-то явно определенного самого себя.

12 голосов
/ 06 ноября 2016

решение Flexbox

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

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

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

5 голосов
/ 09 декабря 2010

Я не понимаю, почему люди хотят так усердно работать, чтобы найти решение на чистом CSS для простых столбчатых макетов, которые ТАК ЛЕГКО используют старый тег 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>

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

3 голосов
/ 19 января 2011 

<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 голосов
/ 15 августа 2017

Вы можете попробовать 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>
Страница:
...