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

HTML CSS

Green斯丁

2020-03-19

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

第2342篇《如何使div填充剩余的水平空间？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共18个回答

西门达蒙Davaid 2020.03.19

Simplest solution is to just make the left div width equal 100% - the width of the right div plus any margin between them.

<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

小哥神奇 2020.03.19

.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

Try this. It worked for me.

小宇宙A 2020.03.19

The easiest solution is to use margin. This will also be responsive!

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

猿飞云 2020.03.19

Rules for items and containers;

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

Use white-space: nowrap; for texts in last items for their undestructuring.

Item X% | Item Y% | Item Z%

Total length always = 100%!

Item X=50%
Item Y=10%
Item z=20%

then

Item X=70%

Item X is dominant (first items are dominant in table CSS layout)!

Try max-content; property for div inside for spreading div in container:

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

}

Green猿古一 2020.03.19

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

GOTony 2020.03.19

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

村村小小十三 2020.03.19

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

凯梅小胖 2020.03.19

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

AL村村 2020.03.19

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

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

西里西里 2020.03.19

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

Stafan逆天 2020.03.19

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

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

那么问题就在于：扩展元素没有浮动。如果您尝试使扩展元素内有任何嵌套的浮动对象，那么那些“嵌套”的浮动对象根本就不会嵌套。当您尝试clear: both;在“嵌套”浮动商品下粘贴a时，最终也会清除顶级浮动商品。

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

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

凯Sam 2020.03.19

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

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

ㄏ囧囧ㄟ 2020.03.19

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

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

泡芙樱 2020.03.19

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

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Mandy神乐 2020.03.19

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

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

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

Stafan西门逆天 2020.03.19

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

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

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

番长LA 2020.03.19

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

LEY神乐 2020.03.19

这似乎可以完成您想要的。

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

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android