如何将其设置为分配左侧 div 与屏幕的剩余大小一样多？ [复制]

Posted 2023-03-06

【中文标题】如何将其设置为分配左侧 div 与屏幕的剩余大小一样多？ [复制]

【英文标题】：How do I set it to allocate the left div as much as the remaining size of the screen? [duplicate]

【发布时间】：2021-04-16 04:04:16

【问题描述】：

我对 html 中的 div 有疑问。 我有一个屏幕，我已将 right_div 和 center_div 从右侧设置为固定大小。 如何将其设置为分配左侧 div 与屏幕的剩余大小一样多？

.right_div
    width: 90px;
    height: auto;
    float:right;

.center_div
    width: 500px;
    height: 100%;
    float:right;
    right:90px;

.left_div
here

【参考方案1】：

只需设置所有这 3 个 div 的父 div

.parent_div 
    display: flex;

然后是left_div

.left_div 
    flex-grow: 1;

并从其他 div 中移除 float 属性 即更新的代码是这样的

.parent_div 
    display: flex;


.right_div
    width: 90px;
    height: auto;


.center_div
    width: 500px;
    height: 100%;


.left_div 
    flex-grow: 1;

【讨论】：

如果你是父div，是指body吗？

@박성준 基本上是包含 .left_div、center_div 和 right_div 的任何标签，如果是 body 标签，那么是的

【参考方案2】：

使用 javascript 的解决方案。

如果您只想在星号处执行一次，则可以将 setInterval 替换为调用函数一次。

function adjustWidth()
    let right_div_width = document.getElementById('right_div').offsetWidth;
    let center_div_width = document.getElementById('center_div').offsetWidth;
    let container_div_width = document.getElementById('container').offsetWidth;
    document.getElementById('left_div').style.width = (container_div_width - (center_div_width + right_div_width) ) + "px";


setInterval(function() 
    adjustWidth();
, 1000);

#right_div
    background-color: rgba(0, 0, 255, 0.4);
    float: right;
    width: 150px;
    height: 80px;
    float:right;

#center_div
    float: right;
    background-color: rgba(0, 0, 255, 0.4);
    width: 100px;
    height: 80px;
    float:right;
    right:90px;

#left_div
    background-color: rgba(0, 0, 255, 0.4);
    height: 80px;
    float: left;

#container
    height: 80px;
    background-color: rgba(0, 0, 255, 0.5);

<div id="container">
    <div id="left_div">Left Div</div>
    <div id="center_div">Center Div</div>
    <div id="right_div">Right Div</div>
</div>

【参考方案3】：

通过 CSS，您可以使用 Calc() 函数，如下所示：

.right_div
    width: 90px;
    height: auto;
    float:right;

.center_div
    width: 500px;
    height: 100%;
    float:right;
    right:90px;

.left_div
 width: Calc(100% - 500px - 90px - 90px);

【讨论】：

这将是静态的，因此没有响应

由于百分比的原因，它将是响应式的。当您调整窗口大小时，情况会发生变化

谢谢。这正是您想要的代码。