Css

Question

如何将元素的宽度设置为其父元素的 width 减去兄弟元素的未知 width 的 100%。

index.html

<div class="main">
  <div class="sidemenu">
    ...
  </div>
  <div class="contant">
    ...
  </div>
</div>

style.css

.main
{
  width: 100vw;
}

.sidemenu
{
  width: X; /* this value is dymanic, it may change in runtime using JS */
}

.contant
{
  width: ???; /* what do I put here? */
}

如果侧边菜单的宽度是固定的，我可以使用 calc(100% - X)，但由于宽度是动态的，我如何设置宽度以占用父菜单的剩余宽度？
我可以仅使用 Css（不使用 JavaScript）来实现吗？

Answer 1

您可以使用 flexbox，因此无需为 content 区域分配特定宽度

例如

.main {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

.content { flex: 1; margin-left: 1rem; }

Codepen demo

Answer 2

在主容器中使用display: flex：

    .main {
        display: flex;
    } 
    .sidemenu {
        width: X;
    } 
    .contant {
        width: 100%; /* what do I put here? */ 
    }

Answer 3

你要找的方法只能用js实现，否则你无法获取元素的宽度来用另一个计算。

Answer 4

我知道这是一个旧的 post 但这也可以使用 css 变量来完成。

:root {
  --dynamic-width: X;
}
.content {
  width: CALC(100% - var(--dynamic-width));
}

参见：https://jsfiddle.net/wzget15m/

Css - 宽度/高度 100%，没有动态像素数量

Css - Width / Height 100% without dynamic amount of pixels

width

responsive-design

index.html

style.css