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

У меня есть 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>

Это, кажется, для достижения того, что вы собираетесь.

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

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

Автор предлагает три различных способа: один фиксированной ширины, один с тремя переменными столбцами и один с фиксированными внешними столбцами и средней шириной переменной ширины. Гораздо более элегантно и эффективно, чем другие примеры, которые я нашел. Значительно улучшилось мое понимание макета 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>

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

Решение исходит из свойства 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 ширины, иначе пространство не будет заполнено.

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

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

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

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

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

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

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

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

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

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

Ответ @ Boushley был самым близким, однако есть одна проблема, которая не была решена. Право 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. Кроме того, таблица получит правильную ширину и заполнит оставшуюся доступную ширину.

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

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

Вот небольшое исправление для принятого решения, которое предотвращает попадание правого столбца под левый столбец. Заменены 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/

Если вы пытаетесь заполнить оставшееся пространство во flexbox между двумя элементами, добавьте следующий класс в пустой div между двумя, которые вы хотите разделить:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

использование 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>

Кажется, ответ Баушли - лучший способ устроить это, используя поплавки. Однако не без его проблем. Вложенные плавающие элементы в расширенном элементе не будут вам доступны; это сломает страницу.

Показанный метод в основном «подделывает», когда дело доходит до расширяющегося элемента - он на самом деле не плавающий, он просто играет с плавающими элементами фиксированной ширины, используя свои поля.

Тогда проблема именно в том, что расширяющийся элемент не является плавающим. Если вы попытаетесь использовать вложенные плавающие элементы в раскрывающемся элементе, эти «вложенные» плавающие элементы на самом деле вообще не будут вложенными; когда вы попытаетесь засунуть clear: both;под свои «вложенные» всплывающие элементы, вы в конечном итоге также очистите поплавки верхнего уровня.

Затем, чтобы использовать решение Boushley, я хотел бы добавить, что вы должны разместить div, такой как: .fakeFloat {height: 100%; ширина: 100%; плыть налево; } и поместите это прямо в расширенный div; все содержимое расширенного div должно идти внутри этого элемента fakeFloat.

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

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

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

У меня была похожая проблема, и я нашел решение здесь: 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;
}

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

Вы можете использовать свойства Grid CSS, это наиболее понятный, чистый и интуитивно понятный способ структурирования ваших блоков.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}

<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>

Интересно, что никто не использовал position: absoluteсposition: relative

Итак, другое решение будет:

HTML

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

Пример Jsfiddle

/ * * css * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ * * html * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

У меня есть очень простое решение для этого! // HTML

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

// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

Ссылка: http://jsfiddle.net/MHeqG/

У меня была похожая проблема, и я нашел следующую, которая работала хорошо

CSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

HTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

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

А для автоматического расширения поля содержимого и демонстрации левой вертикальной рамки (меню сайта):

https://jsfiddle.net/tidan/332a6qte/

Попробуйте добавить позицию relative, удалить widthи floatсвойства с правой стороны, затем добавить leftи rightсвойство со 0значением.

Кроме того, вы можете добавить margin leftправило со значением, основанным на ширине левого элемента (+ несколько пикселей, если вам нужно пространство между ними) чтобы сохранить его положение.

Этот пример работает для меня:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}

<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

Попробуй это. Это сработало для меня.

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

Вот код

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+" "+'width: '+$rightwidthPosition+" "+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}

/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

Вот моя скрипка, которая может работать для вас так же, как и для меня. https://jsfiddle.net/Larry_Robertson/62LLjapm/

Правила для предметов и контейнеров;

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

Используйте пробел: nowrap; для текстов в последних пунктах для их неструктурирования.

Элемент X% | Элемент Y% | Элемент Z%

Общая длина всегда = 100%!

если

Item X=50%
Item Y=10%
Item z=20%

тогда

Элемент X = 70%

Элемент X является доминирующим (первые элементы доминируют в макете таблицы CSS)!

Попробуйте max-content; свойство для div внутри для распространения div в контейнере:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

Самое простое решение - использовать маржу. Это также будет отзывчивым!

<div style="margin-right: auto">left</div>
<div style="margin-left: auto; margin-right:auto">center</div>
<div style="margin-left: auto">right</div>

Самое простое решение - просто сделать ширину левого div равной 100% - ширину правого div плюс любой отступ между ними.

<div class="cont">
  <div class="search">
    Big Logo Text
  </div>
  <nav>
    <ul class="navbar">
      <li><a href="#1">NavLink1</a></li>
      <li><a href="#2">NavLink2</a></li>
      <li><a href="#3">NavLink3</a></li>
      <li><a href="#4">NavLink4</a></li>
      <li><a href="#5">NavLink5</a></li>
    </ul>
  </nav>
</div>

.cont{
  display: inline-grid;
  grid-template-columns: 160px 10px calc(100% - 170px);
  grid-template-rows: auto;
  grid-template-areas: "search .  navigation";
  width: 100%;
  height: auto;
  text-align: center;
}

.search {
  grid-area: search;
  height: 90px;
  background-color: #00FF00;
  line-height: 80px;
  font-size: 1.4rem;
  font-weight: 600;
}
nav {
  grid-area: navigation;
  height: 90px;
  background-color: #A53030;
}

.navbar{
  display: flex;
  height: 30px;
  width: 100%;
  padding: 0%;
  list-style-type: none;
  flex-flow: row wrap;
  flex: 0 1 auto;
  justify-content: space-between;
  align-content: flex-start;
  align-items: flex-start;
}

.navbar a{
    outline: 0;
    text-decoration: none;
}

https://codepen.io/tamjk/pen/dybqKBN

Я столкнулся с этой же проблемой, пытаясь расположить некоторые элементы управления jqueryUI . Хотя общая философия сейчас "использовать DIVвместоTABLE », я обнаружил, что в моем случае использование TABLE работает намного лучше. В частности, если вам нужно прямое выравнивание внутри двух элементов (например, вертикальное центрирование, горизонтальное центрирование и т. Д.), Опции, доступные в TABLE, предоставляют простые, интуитивно понятные элементы управления для этого.

Вот мое решение:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>