CSS全屏网格布局（带有一些滚动部分） [英] CSS fullscreen grid layout (with some scrolling sections)

问题描述

所以，它是2010年，我仍然不知道如何在CSS中做这个布局..

So, it's 2010 and I still don't know how to do this layout in CSS..

对不起，如果这有一个明显的答案，我感谢任何帮助你可以提供。

Sorry if this has an obvious answer, I appreciate any help you could offer.

我已经看到这个部分的紧密解决方案，但不是所有这些组合。

I've seen close solutions for parts of this, but not all of these combined.

1. 布局必须始终填满屏幕（未知尺寸和动态调整大小）


2. A，D，C，F是固定高度（例如64像素）
   
   
   
   
   • B和E必须展开以填充剩余的垂直空间。
   
   
   • 如果B或E用完空间，
   
   

• D，E，F必须展开才能填满剩余的水平空间。

推荐答案

啊，我努力了一会儿...结果比预期容易得多。

Ah, I struggled with this for a while...the result is much easier than expected, however.

A {
    position: absolute;
    top: 0;
    left: 0;
    height: #px;
    width: #px;
}
B {
    position: absolute;
    top: {height of A};
    left: 0;
    width: #px;
    bottom: {height of C};
    overflow-y: scroll; /* note that the scrollbar will always be visible */
}
C {
    position: absolute;
    left: 0;
    width: #px;
    bottom: 0;
    height: #px;
}
D {
    position: absolute;
    top: 0;
    left: {width of A};
    right: 0;
    height: #px;
}
E {
    position: absolute;
    top: {height of D};
    left: {width of B};
    right: 0;
    bottom: {height of F};
    overflow-y: scroll;
}
F {
    position: absolute;
    left: {width of F};
    right: 0;
    bottom: 0;
    height: #px;
}

请注意，#px应该替换为大小。
希望这有助于！

Note that #px should be replaced by the size. Hope this helps!

这篇关于CSS全屏网格布局（带有一些滚动部分）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！