Як змусити діву заповнити залишився горизонтальний простір?

У мене є 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.

В основному, у простому випадку вище, пливіть перший стовпець ліворуч і надайте йому фіксовану ширину. Потім надайте стовпцю праворуч поле, що трохи ширше першого стовпця. Це воно. Зроблено. Код Али Бушлі:

Ось демонстрація в Stack Snippets & 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>

На прикладі Бушлі ліва колонка тримає інший стовпчик праворуч. Як тільки лівий стовпець закінчується, правий починає знову заповнювати весь простір. Тут правий стовпець просто вирівнюється далі на сторінку, а лівий стовпчик займає великий запас жиру. Не потрібно взаємодії потоків.

Рішення виходить із властивості відображення.

В основному вам потрібно змусити два діви діяти як клітини таблиці. Тож замість використання float:leftвам доведеться використовувати display:table-cellобидві діви, а для діву динамічної ширини вам також потрібно встановити 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 у розділі динамічної ширини, інакше простір не заповниться.

Я сподіваюся, що це вирішить вашу проблему. Якщо хочете, ви можете прочитати повну статтю, яку я написав про це у своєму блозі .

У ці дні слід скористатися flexboxметодом (може бути адаптований до всіх браузерів з префіксом браузера).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Більше інформації: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Оскільки це досить популярне питання, я схильний поділитися приємним рішенням, використовуючи BFC.
Codepen зразок нижче тут .

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

@ Відповідь Бушлі була найближчою, однак є одна проблема, яку не було вирішено, на яку було вказано. Право 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/

Якщо ви намагаєтеся заповнити залишок місця у флексі між двома елементами, додайте наступний клас до порожнього поділу між двома елементами, які ви хочете розділити:

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

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

Показаний метод в основному "підробляє його", коли мова йде про елемент, що розширюється - він насправді не плаває, він просто грає разом з плаваючими елементами фіксованої ширини, використовуючи його поля.

Тоді проблема полягає саме в тому, що елемент, що розширюється, не плаває. Якщо ви намагаєтеся, щоб якісь вкладені плавали в межах розширюваного елемента, ці "вкладені" плаваючі елементи насправді взагалі не вкладаються; коли ви намагаєтеся приклеїти aclear: both; під "вкладені" плаваючі елементи, ви також очистите поплавці верхнього рівня.

Потім, щоб використовувати рішення Boushley, я хотів би додати, що ви повинні розмістити div, такий як: .fakeFloat {висота: 100%; ширина: 100%; поплавок: зліва; } і розмістіть це безпосередньо в розширеному розділі; весь вміст розгорнутого 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>

Найпростішим рішенням є просто зробити ширину лівого діва рівним 100% - ширину правого діла плюс будь-який запас між ними.

<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", я виявив, що в моєму випадку використання ТАБЛИЦІ працювало набагато краще. Зокрема, якщо вам потрібно встановити прямолінійне вирівнювання в межах двох елементів (наприклад, вертикальне центрування, горизонтальне центрування тощо), доступні варіанти з ТАБЛИЦІ дають прості, інтуїтивні елементи керування для цього.

Ось моє рішення:

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