如何设置管理面板的内容区域以占用剩余宽度[重复]

Posted 2023-03-06

【中文标题】如何设置管理面板的内容区域以占用剩余宽度[重复]

【英文标题】：How to set the content area of admin panel to occupy the remaining width [duplicate]

【发布时间】：2019-02-08 10:46:54

【问题描述】：

我有这个 html，一个简单的管理面板骨架：

body margin: 0

.adminpanel 
  display: flex;
  height: 100vh;


.leftpane 
  width: 250px;
  background-color: #0038a8;
    

.rightpane 
  width: 87%;
  background-color: #ce1126;

<div class="adminpanel">
  <div class="leftpane">
    left
  </div>
  <div class="rightpane">
    right
  </div>
</div>

根据上面的代码，我将.leftpane 设置为250px 的宽度。如何设置.rightpane 占据剩余宽度？

使用width: 87%; 适用于我的笔记本电脑宽度，分辨率为 1900 像素。

有什么想法吗？

我以前在管理面板上工作，但使用 css 框架，但在这种情况下不是。

【问题讨论】：

.rightpane flex: 1

作为旁注，您需要考虑在编写您的问题时遇到的相关问题 .. 实际上，它们在该问题的右侧也可见 .. 其中 2 个问题完美地回答了您的问题跨度>

【参考方案1】：

您可以在右侧窗格中使用flex-grow:1; 并删除宽度：

.adminpanel 
  display: flex;
  flex-direction: row;
  height: 100vh;


.leftpane 
  width: 250px;
  background-color: #0038a8;


.rightpane 
  background-color: #ce1126;
  flex-grow: 1;

<div class="adminpanel">
  <div class="leftpane">
    left
  </div>

  <div class="rightpane">
    right
  </div>
</div>

【参考方案2】：

你可以使用：

.rightpane  flex-grow: 1; 

还是老派：

.rightpane  width: calc(100% - 250px); 

【参考方案3】：

body margin: 0

.adminpanel 
  display: flex;
  height: 100vh;


.leftpane 
  width: 250px;
  background-color: #0038a8;
    

.rightpane 
  flex-grow: 1;
  /*or width: calc(100% - 250px)     */
  background-color: #ce1126;

<div class="adminpanel">
  <div class="leftpane">
    left
  </div>
  <div class="rightpane">
    right
  </div>
</div>