it-swarm.com.ru

Как заставить 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>

371
alexchenco

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

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

59
Boushley

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

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

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

248
Hank

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

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

122
Mihai Frentiu

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

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

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

98
mystrdat

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

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

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

86
Jordan

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

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

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

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

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

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

15
Denzel

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

12
Dariusz Sikorski

Используйте 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
Ildar Zaripov

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

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

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

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

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

3
chinchi11a

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

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

3
alex351

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

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

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

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

/* * 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>
0
user1700099

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

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

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

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

}

0
Dmytro Yurchenko

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

Вот код

// 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()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'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()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'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/

0
Larry Robertson

Интересно, что никто не использовал 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

0
Buksy

Вы можете использовать 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>

0
colxi

У меня есть очень простое решение для этого! // 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/

0
iamatsundere181

Попробуйте добавить позицию 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;
    }
0
KeepMove

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

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/

0
Tidan

.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

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

0
Spoorthi

элемент таблицы html делает это по умолчанию ... Вы определяете ширину таблицы, тогда столбцы всегда будут охватывать всю ширину таблицы. Остальное о воображении

0
Botea Florin