Question

我想实现一个包含4个div（screenshot）的布局。屏幕高的菜单应为180px wide和78%（因为我已将屏幕的前21％用于其他内容），而 field1_top的宽度应该是应该是屏幕的其余部分以及屏幕的height be 38%。菜单与其他之间的差距应为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%}

显然这会使＆＃34; menu＆＃34;之间的差距缩小。和其他divs变量：在小屏幕尺寸中，其他框进入菜单，在大屏幕尺寸中，间隙变得太大......

我已经尝试用div周围的表格或者像＆＃34; Issue mixing px and % for responsive layout＆＃34;中的块级元素来解决这个问题。我遇到的问题是其他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%
}

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

1 个答案: