在CSS中布局DIV时混合PX和％

Question

我想实现一个带有4个Divs（屏幕截图）的布局。菜单应为180px wide和78%（因为我使用了屏幕上的前21％的屏幕上的前21％），而 field1_top 的宽度应为其余的屏幕及其是屏幕的height be 38%。 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%}

显然，这将使"菜单"和其他Divs变量之间的差距：在小屏幕大小中，其他盒子运行到菜单中，在大屏幕中，差距太大了...

我已经尝试用Divs周围的表或块级元素（例如" esseion Complate complate px and％）进行响应迅速布局"来解决此问题。问题我有，然后其他divs 拿走了它们内容所需的高度和宽度，并且变得非常大。但是我不希望屏幕滚动，但如果有必要，则在Divs中都有所有的滚动条。

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

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%
}