将固定宽度设置为父级的 100% 高度答案

【问题标题】：setting fixed width with 100% height of the parent将固定宽度设置为父级的 100% 高度
【发布时间】：2020-06-08 18:37:06
【问题描述】：

在下面的 HTML 中，我想将 left 和 right 的高度设置为 parent 元素的 100%。此外，left div 具有固定宽度。 right 应该使用所有剩余的宽度。

我认为由于在父 div 中使用 display: flex;，left div 的宽度不会保持不变。如何为其设置固定宽度并将所有剩余空间分配到右侧。

编辑：calc(100-52px) 是parent 的高度。问题只是关于向左设置 100px 的固定宽度，以便在调整窗口大小时它不会改变。

这是我正在尝试的：

body {
  padding: 0;
  margin: 0;
}

.parent {
  background: red;
  display: flex;
  height: calc(100vh - 52px);
  
}

.left {
  width: 100px;
  background: yellow;      
  
}

.right {    
  background: orange;
  width: 100%;  
  
}

<div class="parent">
 
     <div class="left">the width should be fixed, not flexible</div>  
     <div class="right">width should be all of the remaining</div>
  
</div>

【问题讨论】：

按照你为我描述的方式工作......
您希望右边距右边缘 52px 吗？否则我不明白这个问题是关于什么的。它工作正常。
@G-Cyrillus 不，抱歉忽略。那是父母的身高。问题只是关于将left设置为100的固定宽度。似乎因为display: flex它在调整大小窗口上发生了变化。
好的，那么 .left 需要：flex:0 0 100px; :) 和正确的 flex-grow:1;满足弹性规则/行为；）

标签： html css

【解决方案1】：

父{显示：-webkit-box；显示：-webkit-flex；显示：-ms-flexbox；显示：flex；flex-wrap：换行； }

.parent > [class*='col-'] { display: flex;弹性方向：列； }

【讨论】：

【解决方案2】：

您可以将width: calc(100% - 100px) 或flex: 1 用于正确的div。

百分比值是从父元素计算出来的，因此您需要从 100% 中提取静态值以获取剩余区域。

但是由于您已经在这里使用了 flex 容器，您可以设置 flex: 1，它是 flex-grow: 1 的简写，这将允许您的容器占用父容器中的所有额外空间，因为没有其他可用的项目。

【讨论】：

【解决方案3】：

将flex 声明添加到.left 选择器：

flex: 0 0 100px;

flex 语法：

none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

所以这个声明是这样声明的：“不要增长，不要收缩，将初始大小定义为 100px”

阅读更多：flex (MDN)

【讨论】：

【解决方案4】：

如果右边距离最右边 52 像素，那么有一个边距就可以了。请澄清您的问题。

body {
  padding: 0;
  margin: 0;
}

.parent {
  background: red;
  display: flex;
  height: calc(100vh - 52px);
}

.left {
  width: 100px;
  background: yellow;
}

.right {
  flex-grow: 1;
  background: orange;
  margin-right: 52px;
}

<div class="parent">

  <div class="left">the width should be fixed, not flexible</div>
  <div class="right">width should be all of the remaining</div>

</div>

【讨论】：

【解决方案5】：

如果您希望它是恒定的 100 像素，请在您的 .left div 上设置 flex: 0 0 100px;（您可以删除 width: 100px） - 这样就不会增长或缩小。

body {
  padding: 0;
  margin: 0;
}

.parent {
  background: red;
  display: flex;
  height: calc(100vh - 52px);
  
}

.left {
  flex: 0 0 100px;
  background: yellow;      
  
}

.right {    
  background: orange;
  width: 100%;  
  
}

<div class="parent">
 
     <div class="left">the width should be fixed, not flexible</div>  
     <div class="right">width should be all of the remaining</div>
  
</div>

【讨论】：

【解决方案6】：

看看这是否对你有帮助，如果你需要任何更改，请发表评论

stackblits link for 1 fixed width, 1 relative column

【讨论】：