Как заставить div заполнить оставшееся горизонтальное пространство? - PullRequest
Новая
       108

Как заставить div заполнить оставшееся горизонтальное пространство?

383 голосов
/ 23 июня 2009

У меня есть 2 элемента: один в левой части и один в правой части моей страницы. Один слева имеет фиксированную ширину, и я хочу, чтобы один справа занял оставшееся пространство. 

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }
<div id="search">Text</div>
<div id="navigation">Navigation</div>

Ответы [ 25 ]

253 голосов
/ 10 мая 2011

Проблема, которую я обнаружил в ответе Баушли, состоит в том, что если правая колонка длиннее левой, она просто обернется вокруг левой и возобновит заполнение всего пространства. Это не то поведение, которое я искал. После поиска множества «решений» я нашел потрясающее руководство по созданию трехколоночных страниц.

Автор предлагает три различных способа: один с фиксированной шириной, один с тремя переменными столбцами и один с фиксированными внешними столбцами и средней шириной переменной ширины. Гораздо более элегантно и эффективно, чем другие примеры, которые я нашел. Значительно улучшилось мое понимание макета CSS.

Как правило, в приведенном выше простом случае плавают первый столбец влево и задайте ему фиксированную ширину. Затем задайте для столбца справа левое поле, которое немного шире первого столбца. Вот и все. Готово. Код Аллы Боушли:

Вот демонстрация в Фрагменты стека & jsFiddle 

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<div id="right"> right </div>

На примере Бушли левый столбец содержит другой столбец справа. Как только левый столбец заканчивается, правый снова начинает заполнять все пространство. Здесь правый столбец просто выравнивается дальше по странице, а левый столбец занимает большой жирный край. Нет необходимости взаимодействия потоков.

123 голосов
/ 24 марта 2011

Решение исходит из свойства display.

По сути, вам нужно сделать так, чтобы два div действовали как ячейки таблицы. Таким образом, вместо использования float:left, вы должны будете использовать display:table-cell в обоих div, а для динамического div ширины необходимо также установить width:auto;. Оба элемента должны быть помещены в контейнер шириной 100% со свойством display:table.

Вот CSS: 

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

И HTML: 

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

ВАЖНО: для Internet Explorer необходимо указать свойство float в динамическом div ширины, иначе пространство не будет заполнено.

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

99 голосов
/ 27 июня 2014

Поскольку это довольно популярный вопрос, я склонен поделиться хорошим решением с использованием BFC.
Образец кодекса следующего здесь . 

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

В этом случае overflow: auto запускает контекстное поведение и заставляет правый элемент расширяться только до доступной оставшейся ширины, и он естественным образом расширяется до полной ширины, если исчезает .left. Очень полезный и чистый трюк для многих макетов пользовательского интерфейса, но, возможно, сначала трудно понять, «почему он работает».

97 голосов
/ 04 августа 2014

В наши дни вы должны использовать метод flexbox (может быть адаптирован для всех браузеров с префиксом браузера). 

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Дополнительная информация: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

61 голосов
/ 23 июня 2009

Похоже, что вы достигнете того, чего хотите. 

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>
21 голосов
/ 28 сентября 2015

Если вам не нужна совместимость со старыми версиями определенных браузеров (например, IE 10 8 или менее), вы можете использовать функцию calc() CSS: 

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}
15 голосов
/ 19 апреля 2012

@ Ответ Бушли был самым близким, однако есть одна проблема, которая не была решена. right div занимает всю ширину браузера; содержимое занимает ожидаемую ширину. Чтобы лучше увидеть эту проблему: 

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

Содержимое находится в правильном месте (в Firefox), однако ширина неверна. Когда дочерние элементы начинают наследовать ширину (например, таблицу с width: 100%), им присваивается ширина, равная ширине браузера, что приводит к их переполнению в правой части страницы и созданию горизонтальной полосы прокрутки (в Firefox) или не плаванию и нажата (хром).

Вы можете исправить это легко, добавив overflow: hidden в правый столбец. Это дает вам правильную ширину как для содержимого, так и для div. Кроме того, таблица получит правильную ширину и заполнит оставшуюся доступную ширину.

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

Если есть какие-либо проблемы или проблемы, не стесняйтесь их поднимать.

12 голосов
/ 04 октября 2015

Вот небольшое исправление для принятого решения, которое предотвращает падение правого столбца под левым столбцом. Замените width: 100%; на overflow: hidden; хитрым решением, если кто-то его не знал. 

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[править] Также проверьте пример для трехколоночной разметки: http://jsfiddle.net/MHeqG/3148/

4 голосов
/ 21 декабря 2016

Использование display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>
3 голосов
/ 07 ноября 2014

У меня была похожая проблема, и я нашел решение здесь: https://stackoverflow.com/a/16909141/3934886

Решение для колонок с фиксированным центральным делителем и жидкостной стороны. 

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

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

Страница:
...