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

Posted 2023-03-06

技术标签:

【中文标题】如何让 div 填充剩余的水平空间？【英文标题】：How to make a div fill a remaining horizontal space? 【发布时间】：2010-11-05 04:44:29 【问题描述】：

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

【问题讨论】：

去掉#navigation的width和float属性就可以了。相关***.com/questions/4873832/… @AdrienBe 实际上，如果您查看 mystrdat 的答案，我认为它会更好。它只是一行 css，也是唯一对我有用的（我用 float:left 制作了三列；前两列具有固定宽度，overflow:auto 在最后一列，效果很好） @edwardtyl 很公平。实际上，它似乎使用了与我为***.com/questions/4873832/…提供的答案类似的技术在下面几行中查看我的答案。答案是结合float: left 和overflow hidden。这将为您提供正确的“填充剩余空间”行为。 【参考方案1】：

如果有人需要相同的解决方案但没有左 div 的固定长度：

如果您希望左侧 div 占据它所需的所有空间，您可以删除固定大小 180px。请参阅下面的 CSS：

#left 
  float: left;
  background-color: red;


#right 
  background-color: yellow;
  flex-grow: 1

在 JSFiddle 中查看这里：jsfiddle-div-space

【讨论】：

【参考方案2】：

我在 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 的示例中，左列将另一列保留在右侧。一旦左列结束，右列就开始再次填充整个空间。在这里，右列只是进一步对齐页面，左列占据了它的大页边距。无需流交互。

【讨论】：

当您关闭 div 标签时，该 div 之后的内容应该显示在一个新行中，但这并没有发生。你能解释一下为什么吗？应该是：margin-left：190px；你忘了 ';'。左边距也应该是 180px。注意：如果你想要固定宽度的元素在右边，一定要在代码中放在最前面，否则无论如何都会被推到下一行。 @RoniTovi ，浮动元素应该在你的 html 中的非浮动元素之前。 jsfiddle.net/CSbbM/127 那么，如果您想避免固定宽度，该怎么做呢？换句话说，让左列的宽度与它需要的一样宽，而右列占据其余部分？【参考方案3】：

由于这是一个相当受欢迎的问题，我倾向于使用 BFC 分享一个不错的解决方案。以下here的Codepen示例。

.left 
  float: left;
  width: 100px;

.right 
  overflow: auto;

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

【讨论】：

浏览器支持溢出。 IE4！！！ w3schools.com/cs-s-ref/pr_pos_overflow.asp 有时我会在 .right 元素上看到一个无用的水平滚动条。那里有什么问题？ @PatrickSzalapski 你能制作一个代码笔或类似的案例吗？溢出auto 可能会根据其内容触发。您也可以使用任何其他溢出值来获得相同的效果，hidden 可能更适合您的情况。 BFC 代表什么，网络上是否有很好的通用教程解释 BFC？ @lulalala 它代表块格式化上下文。这是一个更彻底的explanation【参考方案4】：

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

.container 
    display: flex;


.left 
    width: 180px;


.right 
    flex-grow: 1;

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

【讨论】：

请参阅 www.w3schools.com/cs-s-ref/css3_pr_flex-grow.asp 以了解 CSS 属性的详细说明。一个简单的现代解决方案，但可能不适用于旧浏览器。 Flexbox FTW ...我已经尝试了这个线程中的所有其他解决方案，没有任何效果，我尝试了这个 flexbox 解决方案，它立即工作......经典 CSS（即在 flexbox 出现之前和 css 网格）完全不擅长布局...... flex 和网格规则 :-) 这应该被接受为当前选择的解决方案。此外，它是唯一的“非黑客”解决方案。 flex-grow 赢得胜利！即使您在其他 flex-arranged div 之间有可扩展 div，此解决方案也有效。 :thumbup:【参考方案5】：

解决方案来自于显示属性。

基本上你需要让这两个 div 像表格单元格一样工作。所以不要使用float:left，你必须在两个div上使用display:table-cell，对于动态宽度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属性，否则空间将不会被填充。

我希望这能解决您的问题。如果你愿意，你可以阅读我在my blog上写的关于这个的完整文章。

【讨论】：

当具有width:auto的div内的内容大于视口中剩余的可用空间时不起作用。 @einord，这个解决方案不使用表格，我知道表格应该只用于表格数据。所以，这里断章取意。实际表格和 display:table(+其他变体) 属性是完全不同的东西。 @Mihai Fretiu， display:table 与实际的表格元素有哪些不同？如果它们是完全不同的东西，我真的很想学习这个，谢谢。 =) @einord，使用 HTML 表格意味着在 HTML 代码中定义整个表格结构。 CSS 表格模型允许您使几乎任何元素的行为都像表格元素，而无需定义整个表格树。 @Mihai Fretiu，感谢您的回答。但是，使用表格作为设计元素，表格元素的行为难道不是问题的一半吗？【参考方案6】：

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

【讨论】：

【参考方案7】：

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

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

【讨论】：

【参考方案8】：

物品和容器的规则；

Container: *** display: table; ***
Items: *** display: table-cell; width: 100%; ***

对最后一项中的文本使用 white-space: 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;
...

【讨论】：

【参考方案9】：

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

【讨论】：

【参考方案10】：

我已经解决这个问题两天了，并且有一个可能适用于您和其他任何人的解决方案，该解决方案试图在左侧制作响应式固定宽度并让右侧填充屏幕的其余部分而不环绕左侧边。我假设的目的是使页面在浏览器和移动设备中响应。

这是代码

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

【讨论】：

【参考方案11】：

@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 中）或不浮动并被向下推（在 chrome 中）。

您可以通过在右栏中添加overflow: hidden 轻松解决此问题。这为您提供了内容和 div 的正确宽度。此外，表格将接收正确的宽度并填充剩余的可用宽度。

我尝试了上面的其他一些解决方案，它们不能完全适用于某些边缘情况，而且过于复杂以至于无法修复它们。这很有效，而且很简单。

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

【讨论】：

overflow: hidden 确实解决了这个问题，谢谢。（标记的答案是错误的顺便说一句，right 实际上占用了父级上的所有可用空间，您可以在检查元素时在所有浏览器中看到这一点）谁能解释为什么这完全有效？我知道我在这里的某个地方看到了一个很好的解释，但我似乎找不到它。 @tomswift Setting overflow: hidden 将右列置于其自己的块格式化上下文中。块元素占据了它们可用的所有水平空间。见：developer.mozilla.org/en-US/docs/Web/Guide/CSS/… overflow:xxx 属性是关键。正如您所说，它阻止#right 在#left 下方扩展。它非常巧妙地解决了我在使用可调整大小的 jQuery UI 时遇到的问题——#right 设置了溢出属性，#left 设置为可调整大小，你有一个简单的可移动边界。见jsfiddle.net/kmbro/khr77h0t。【参考方案12】：

这似乎完成了你的目标。

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

【讨论】：

您必须删除右侧 div 上的 width: 100% 才能使其正常工作。这个方案其实有问题。尝试从 LEFT 元素中删除颜色。你会注意到 RIGHT 元素的颜色实际上隐藏在它下面。内容似乎去到了正确的地方，但 RIGHT div 本身却没有。 +1 也解决了我的问题。我学到的是我需要删除填充 div 上的“float:left”。我认为这会使页面内爆也许很高兴注意到 Vyroteks 的评论是正确的，但可以通过右列的 overflow:hidden 来解决。丹泽尔提到了这一点，但他的答案不是公认的，所以你可能会错过...... 这显然是错误的，右边的元素是全尺寸的，只是它的内容在左边的元素周围浮动。这不是一个解决方案，只是更多的混乱。【参考方案13】：

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

【讨论】：

这个答案重复了 Jordan 2014 年的答案。【参考方案14】：

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

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

【讨论】：

【参考方案15】：

这里有一个针对已接受解决方案的小修复，它可以防止右列落在左列之下。如果有人不知道，将 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/

【讨论】：

带有固定标志的灵活导航栏的完美解决方案。【参考方案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 example

【讨论】：

【参考方案17】：

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

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


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

【讨论】：

IE 9 及更高版本支持 calc 属性。这个解决方案的唯一问题是我们可能不知道左列的宽度或者它会改变。好吧，这个解决方案可能面向灵活的情况，并假设您不知道或不关心父容器的宽度。在@alexchenco 的问题中说他想填充“剩余空间”所以......我认为是有效的:) 是的，IE 9 也受支持，感谢您的说明；）【参考方案18】：

.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

试试这个。它对我有用。

【讨论】：

【参考方案19】：

尝试添加位置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;

【讨论】：

【参考方案20】：

我有一个类似的问题，并想出了以下效果很好

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/

【讨论】：

【参考方案21】：

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

【讨论】：

【参考方案22】：

我遇到了类似的问题，我在这里找到了解决方案： https://***.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;

如果您想要一个固定的左列，只需相应地更改公式即可。

【讨论】：

在 IE8 等旧版浏览器上不可用，仅部分在 IE9 上可用 (caniuse.com/#feat=calc)【参考方案23】：

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

【讨论】：

【参考方案24】：

我尝试了上述针对液体左侧的解决方案，以及一个固定的右侧解决方案，但它们都不起作用（我知道问题是相反的，但我认为这是相关的）。以下是有效的方法：

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

【讨论】：

【参考方案25】：

我在尝试布局一些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  ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>

【讨论】：

您永远不应该使用表格来格式化除表格数据之外的任何内容。永远。表格的问题在于，如果您尝试显示的内容不是表格数据，那么标记会产生误导。如果您选择忽略标记承载意义的原则，您还不如回到<font>、<b> 等。HTML 演变过去，不再关注表示。不知道为什么每个人都对桌子着迷。有时它们很有用。您无法固定桌子的高度。如果内容变大，那么表格也会变大。而且它不尊重overflow。 @Jandieg：请参阅 Mihai Frentiu 的答案以获得解释。 CSS 的全部目的是将内容与外观分开。使用像display:table 这样的属性来实现非表格数据的所需外观是干净的。将页面列或表单控件等非表格数据强制放入 HTML 表格中以控制布局是不干净的。【参考方案26】：

Boushley 的回答似乎是最好的方式来安排这个使用浮动。然而，它并非没有问题。您将无法使用展开元素内的嵌套浮动；它会破坏页面。

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

那么问题就在于：扩展元素没有浮动。如果您尝试在扩展元素中使用任何嵌套浮动，则那些“嵌套”浮动项根本不是真正嵌套的；当您尝试在“嵌套”浮动项目下粘贴 clear: both; 时，您最终也会清除***浮动。

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

因此，我建议在这种特定情况下使用表格。浮动元素确实不是为了进行您想要的扩展而设计的，而使用表格的解决方案是微不足道的。通常有人认为浮动更适合于布局，而不是表格。但无论如何你都没有在这里使用浮动，你在伪造它——这有点违背了这种特定情况下风格论点的目的，在我的拙见。

【讨论】：

不要使用表格进行布局。您无法设置它们的高度。他们扩展以容纳他们的内容，并且他们不尊重溢出。 @kbro：不要使用表格进行布局，因为内容和显示应该分开。但如果内容是表格结构，它当然可以用overflow: hidden 进行剪辑。 jsfiddle.net/dave2/a5jbpc85

以上是关于如何让 div 填充剩余的水平空间？的主要内容，如果未能解决你的问题，请参考以下文章

Angular：使用打开和关闭sidenav（Angular Materials）使div填充剩余的水平空间

让一个 div 填充剩余屏幕空间的高度

如何使 flexbox 元素填充剩余空间并滚动？

如何让最右边的列填充剩余空间？

如何制作侧面导航栏并让div填充其余空间[重复]