Question

我正在尝试创建类似于此的布局：

select t.*
from ((select 'POL_ID' as col1, POL_ID as col2, Amount from invoices
      ) union all
      (select 'LTT_ID' as col1, LTT_ID as col2, Amount from invoices
      ) union all
      (select 'MSF_ID' as col1, MSF_ID as col2, Amount from invoices
      )
     ) t
where col2 is not null;

html以这种方式组织

+-------------------------+ 
|      |        2         |
|      | +----+---------+ |
|      | |    |         | |
|   1  | |  4 |    5    | |
|      | |    |         | |
|      | +--------------+ |
|      | |      6       | |
|      | +--------------+ |
+-------------------------+

1: Menu
2: Container
3: (removed toolbar for simplicity)
4, 5, 6: Nested layout

到目前为止，我的CSS看起来像这样：

<div class="mainapp">
  <div class="menu">
  </div>
  <div class="container">
    <div class="childlayout">
      <div class="topleft"></div>
      <div class="topright"></div>
      <div class="bottom"></div>
    </div>
  </div>
</div>

正如您在CSS中看到的那样，childlayout类必须为.mainapp { position: relative; width: 100%; height: 100%; } .menu { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; } .container { position: absolute; left: 200px; top: 0; bottom: 0; right: 0; } .childlayout { // here is the problem // this shuld be a 100% width and 100% height // RELATIVE to parent } .topleft { position: absolute; left: 0; top: 0; width: 50%; height: 50%; } .topright { position: absolute; left: 50%; top: 0; right: 0; height: 50%; } .bottom { position: absolute; left: 0; top: 50%; right: 0; bottom: 0; }才能允许子position: relative。我需要所有这些div基于百分比，因为“app”可以动态调整大小，我希望一切都能适应浏览器的窗口大小。

另外，我认为这是没有jQuery / JavaScript的所有CSS（当然，如果没有解决方案，我可以使用这些）。

我也可以接受基于Flex Layout的解决方案。

有人可以帮我这个吗？。

Answer 1

.mainapp {
  position: relative; 
  width: 100%;
  height: 100%;
}

此处height:100%是问题所在。

将其更改为

.mainapp {
      position: relative; 
      width: 100%;
      height: 100vh;
    }

你将拥有你想要的东西。

如果您想要更好的解释，请阅读THIS的Mr. James Donnelly回复。

嵌套布局在绝对容器内

1 个答案: