Как сделать так, чтобы 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>

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

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

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

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

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

По сути, вам нужно сделать так, чтобы два div действовали как ячейки таблицы. Поэтому вместо использования float:left вам придется использовать display:table-cell на обоих div, а для div с динамической шириной вам также необходимо установить width:auto;. Оба div должны быть помещены в контейнер шириной 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 динамической ширины, иначе пространство не будет заполнено.

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

Поскольку это довольно популярный вопрос, я склонен поделиться хорошим решением с использованием 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/

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

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

Используйте 1_

<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%; ***}

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

Пункт X% | Пункт Y% | Пункт Z%

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

if

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

тогда

Пункт X = 70%

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

Попробуйте свойство 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>