Как заставить div заполнить оставшееся горизонтальное пространство?
https://stackoverflow.com/questions/1032914
-
06-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
У меня есть 2 div:один в левой и один в правой части моей страницы.Тот, что слева, имеет фиксированную ширину, и я хочу, чтобы тот, что с правой стороны, заполнил оставшееся пространство.
#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; также.Оба элемента 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.
Пример Codepen следующего содержания здесь.
.left {
float: left;
width: 100px;
}
.right {
overflow: auto;
}
В этом случае, overflow: auto запускает поведение контекста и расширяет нужный элемент только до доступной оставшейся ширины, и он, естественно, расширится до полной ширины, если .left исчезает.Очень полезный и понятный трюк для многих макетов пользовательского интерфейса, но, возможно, поначалу сложно понять, «почему он работает».
В наши дни вам следует использовать flexbox метод (может быть адаптирован для всех браузеров с префиксом браузера).
.container {
display: flex;
}
.left {
width: 180px;
}
.right {
flex-grow: 1;
}
Больше информации: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Если вам не нужна совместимость со старыми версиями некоторых браузеров (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>
Содержимое находится в правильном месте (в Firefox), однако неправильная ширина.Когда дочерние элементы начинают наследовать ширину (например,стол с width: 100%) им присваивается ширина, равная ширине браузера, в результате чего они выходят за пределы правой части страницы и создают горизонтальную полосу прокрутки (в Firefox) или не плавают и сдвигаются вниз (в Chrome).
Ты можешь почини это легко, добавив 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/
[edit] Также проверьте пример макета из трех столбцов: http://jsfiddle.net/MHeqG/3148/
Использовать 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 {высота: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
Решение — для div с фиксированным центром и столбцов со стороны жидкости.
.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;
}
Если вам нужен фиксированный левый столбец, просто измените формулу соответствующим образом.
Если вы пытаетесь заполнить оставшееся пространство во флексбоксе между двумя элементами, добавьте следующий класс в пустой элемент div между двумя элементами, которые вы хотите разделить:
.fill {
// This fills the remaining space, by using flexbox.
flex: 1 1 auto;
}
Вы можете использовать свойства CSS Grid — это наиболее понятный, понятный и интуитивно понятный способ структурировать ваши блоки.
#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;
}
/ * * 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>
Этот метод не переносится при сжатии окна, но автоматически расширяет область «содержимого».Он сохранит статическую ширину меню сайта (слева).
А для автоматического расширения поля содержимого и демонстрации левого вертикального поля (меню сайта):
Попробуйте добавить позицию 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/
Элемент таблицы html делает это по умолчанию...Вы определяете ширину таблицы, тогда столбцы всегда будут занимать всю ширину таблицы.Остальное дело воображения
Правила для предметов и контейнеров;
Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}
Использовать пробел:теперьрап; для текстов в последних пунктах для их неструктурирования.
Пункт x% | Предмет y% | Предмет Z%
Общая длина всегда = 100%!
если
Item X=50%
Item Y=10%
Item z=20%
затем
Товар Х=70%
Элемент X является доминирующим (первые элементы доминируют в макете таблицы CSS)!
Пытаться макс-контент; свойство для div внутри для распространения div в контейнере:
div[class="item"] {
...
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
...
}
Я столкнулся с той же проблемой, пытаясь разметить некоторые 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>
новичок в CSS.Но я решил эту проблему, используя встроенный блок.Проверь это: http://learnlayout.com/inline-block.html
