html - 在 css 中布局 div 时混合 px 和 %

Question

我想实现一个有 4 个 div ( screenshot) 的布局。 菜单 应为 180px 宽 和 78%(因为我已将屏幕顶部的 21% 用于其他内容)屏幕高度，而field1_top 的宽度应为屏幕的其余部分，高度为屏幕的 38%。 菜单和其他之间的差距应该是屏幕尺寸的1%。

我目前最好的解决方案是:

div.menu{width:180px;height:78%;position:absolute;overflow:auto;left:1%;top:21%}
div.field1_top{width:84%;height:38%;position:absolute;overflow:auto;left:15%;top:21%}
div.field1_bottom_left{width:30%;height:38%;position:absolute;overflow:auto;left:15%;top:61%}
div.field1_bottom_right{width:53%;height:38%;position:absolute;overflow:auto;left:46%;top:61%}

显然，这会使“菜单”和其他 div 之间的差距可变:在小屏幕尺寸下，其他框会进入菜单，而在大屏幕尺寸下，差距会变得太大...

我已经尝试用围绕 div 的表格或像“Issue mixing px and % for responsive layout”中的 block 级元素来解决这个问题。我在那里遇到的问题是其他div占用了他们内容所需的高度和宽度，并且变得非常大。但我不希望屏幕滚动，而是在 div 中包含所有滚动条，如果有必要的话。

这是我的第一个问题，我希望我能解释清楚我的问题，以便大家理解。当然，如果有人能帮助我，我会很高兴。

Answer 1

您可以使用此解决方案:https://stackoverflow.com/a/1763906/4810983

或者，您可以尝试calc:https://css-tricks.com/a-couple-of-use-cases-for-calc/ 所以你会得到类似的东西:

div.field1_top {
    width:calc(100% - 220px);
    height:38%;
    position:absolute;
    overflow:auto;
    left:200px;
    top:21%
}