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

Question

我想实现一个有 4 个 div 的布局 (screenshot)。 menu 应该是180px wide 和78%（因为我已经将屏幕顶部的21% 用于其他内容）屏幕高，而field1_top 的宽度应该是屏幕的其余部分，它是屏幕的height be 38%。 menu 和 others 之间的 gap 应该是1% of screensize。

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

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”中的块级元素来解决此问题。我遇到的问题是，其他 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%
}