如何使div填充剩余的水平空间？

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

#1楼

我在尝试布局一些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>

#2楼

@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提供正确的宽度。此外，表格将接收正确的宽度并填充可用的剩余宽度。

我在上面尝试了其他一些解决方案，它们在某些极端情况下无法完全发挥作用，而且过于费力以至于无法修复它们。这有效并且很简单。

如果有任何问题或疑虑，请随时提出。

#3楼

这似乎可以完成您的目标。

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

#4楼

我尝试了上述解决方案，以左移为液体，右移为固定，但没有一个起作用（我知道问题是相反的，但我认为这是相关的）。这是起作用的：

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

#5楼

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

#6楼

由于这是一个非常受欢迎的问题，因此我倾向于使用BFC分享一个不错的解决方案。
下面的Codepen样品在这里。

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

在这种情况下， overflow: auto触发上下文行为，并使right元素仅扩展到可用的剩余宽度，如果.left消失，它将自然扩展到全宽。对于许多UI布局而言，这是一个非常有用且干净的技巧，但一开始可能很难理解它的“工作原理”。

#7楼

flexbox ，您应该使用flexbox方法（可能适用于所有带有浏览器前缀的浏览器）。

.container {display: flex;
}.left {width: 180px;
}.right {flex-grow: 1;
}

更多信息： https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

#8楼

我有一个类似的问题，我在这里找到了解决方案： 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;
}

如果要固定的左列，只需相应地更改公式。

#9楼

我对此有一个非常简单的解决方案！ // 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/

#10楼

CSS的新手。但是我通过使用内联块解决了这个问题。检查一下： http : //learnlayout.com/inline-block.html

#11楼

我遇到了类似的问题，并提出了以下效果很好的方法

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/

#12楼

如果不需要与某些浏览器的旧版本（例如，IE 10 8或更低版本）兼容，则可以使用calc() CSS函数：

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

#13楼

尝试添加relative位置，删除右侧的width和float属性，然后使用0值添加left和right属性。

另外，您可以添加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;}

#14楼

这是一个可接受的解决方案的小修正，可以防止右列落在左列之下。更换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/

#15楼

 .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

尝试这个。它为我工作。

#16楼

我想知道没有人使用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示例

#17楼

如果您尝试填充Flexbox中2个项目之间的剩余空间，请将以下类添加到要分离的2个之间的空div中：

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

#18楼

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

#19楼

我已经在这个问题上工作了两天，有一个解决方案可能对您和其他尝试将响应宽度固定为左侧的人都有用，并且右侧要填满屏幕的其余部分，而不能绕在左侧。我假设的目的是使页面在浏览器以及移动设备中都能响应。

这是代码

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

#20楼

您可以使用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>

#21楼

解决方案来自display属性。

基本上，您需要使两个div像表单元格一样起作用。因此，必须在两个div上都使用display:table-cell ，而不是使用float:left ，对于动态宽度div，您需要设置width:auto; 也。两个div都应使用display:table属性放入宽度为100％的容器中。

这是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，您需要在动态宽度div上指定float属性，否则将不填充空格。

我希望这可以解决您的问题。如果需要，您可以阅读我在博客上写的完整文章。

#22楼

html table元素默认情况下会这样做。。。定义表格宽度，然后列将始终跨越整个表格宽度。剩下的就是想像力

#23楼

物品和容器规则；

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布局中的第一项占主导）！

尝试最大内容； div内部的属性，用于在容器中传播div：

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

}

#24楼

最简单的解决方案是使左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

#25楼

最简单的解决方案是使用边距。这也将有所响应！

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

#26楼

我在Boushley的答案中发现的问题是，如果右列的长度比左列的长度长，它将仅包裹在左列周围并继续填充整个空间。这不是我一直在寻找的行为。在搜索了许多“解决方案”之后，我发现了这个关于创建三列页面的出色教程。

作者提供了三种不同的方式，一种固定宽度，一种具有三个可变列，一种具有固定的外部列和中间可变的宽度。比我发现的其他示例更加优雅和有效。大大提高了我对CSS布局的理解。

基本上，在上面的简单情况下，将第一列向左浮动并为其设置固定宽度。然后，在右侧的列中留出一个比第一列稍宽的左边距。而已。做完了 Ala Boushley的代码：

这是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的示例中，左列将另一列保持在右侧。左列结束时，右列将再次开始填充整个空间。在这里，右栏只是简单地与页面对齐，而左栏占据了很大的脂肪余量。无需流交互。

#27楼

Boushley的答案似乎是使用浮点数进行排列的最佳方法。但是，它并非没有问题。扩展元素内的嵌套浮动将不可用；它将中断页面。

当涉及到扩展元素时，所示的方法基本上是“伪造”的-它实际上不是浮动的，它只是使用其边距与固定宽度的浮动元素一起玩。

那么问题就在于：扩展元素没有浮动。如果您尝试使扩展元素内有任何嵌套的浮动对象，那么那些“嵌套”的浮动对象根本就不会嵌套。当您尝试保持clear: both; 在“嵌套”浮动项目下，您最终还将清除顶级浮动项目。

然后，要使用Boushley的解决方案，我想补充一点，您应该放置一个div，如下所示：.fakeFloat {height：100％; 宽度：100％; 向左飘浮; }并将其直接放在扩展的div中；然后，所有扩展div的内容都应放在该fakeFloat元素内。

因此，我建议在这种特定情况下使用表。浮动元素的确不是为了执行您想要的扩展而设计的，而使用表的解决方案却很简单。通常会提出一个论点，即浮动更适合于布局，而不是表格。.但是您无论如何都没有在这里使用浮动，您是在伪造它-在这种情况下，这种风格的论点不符合目的。我的拙见。