使用 CSS 网格的移动 Web 应用程序布局 - 如何使行灵活？

Question

我正在尝试创建一个 Web 应用程序来替代本机 Android 应用程序 - 因此它可以运行在 iOS/Mac/Windows/Ubuntu!

我从 Flexbox 开始 - 但浏览器实现中存在太多错误和不兼容问题。所以我用的是新引入的CSS Grid，看起来更强大，更适合App布局。

布局是：顶部有一个应用栏，还有一个选项卡栏，可让您在多个视图之间切换 - 每个视图都是一个 CSS 自己的网格 - 具有灵活和固定的内容。

我无法让内部元素在高度上弯曲并在屏幕上获得所有可用的 space 并且不会被切断或落在视口之外，因此应用程序应该包含在视口中，绝对没有 scrolling/overflowing 在主屏幕之外。

我该如何实现？您如何指定一行来填充可用的屏幕高度而不是更多？

JS Fiddle 在这里： https://jsfiddle.net/femski/5wpkvdo2/30/

html {
  box-sizing: border-box;
  overflow: hidden;
  height: 100vh;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  height: 100vh;
}

#root {
  max-height: 100vh;
}

element {
  --appbar-height: 6em;
}

element {
  --tabbar-height: 6em;
}

.maingrid {
  display: grid;
  grid-template-columns: auto 80% auto;
  grid-template-rows: var(--appbar-height) var(--tabbar-height) 80%;
}

.nav {
  grid-row: 1;
  grid-column: 2/3;
  z-index: 3;
  position: relative;
  background: blue;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}

.mainTabrow {
  grid-row: 2;
  grid-column: 2;
  z-index: 3;
  position: relative;
  background: green;
  display: grid;
  grid-template-columns: repeat(5, 20%);
}

.maintab {
  grid-row: 3;
  grid-column: 2;
  z-index: 3;
  position: relative;
  align-items: start;
}

.detail {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 2fr var(--tabbar-height) 33fr;
  background: grey;
}

.summary {
  grid-row: 1;
  background: yellow;
}

.subtab {
  grid-row: 2;
  width: 100%;
  background: orange;
  display: grid;
  grid-template-columns: repeat(3, 33.333%);
}

.info {
  grid-row: 3;
  overflow: auto;
}

.detail_grid {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 1fr 1fr 1fr;
  background: red;
}

<div id="root">
  <div class="maingrid">
    <div class="nav">
      <h3>
        Search Bar
      </h3>
      <h3>
        Inside App bar
      </h3>
    </div>
    <div class="mainTabrow">
      <h3>
        Tab 1
      </h3>
      <h3>
        Tab 2
      </h3>
      <h3>
        Tab 3
      </h3>
      <h3>
        Tab 4
      </h3>
      <h3>
        Tab 5
      </h3>
    </div>

    <div class="maintab">
      <div class="detail">
        <div class="summary">
          <div>
            <h1>Flexible Summary Inside 1st Tab - we want this to be scrollable</h1>
          </div>
        </div>
        <div class="subtab">
          <h1>Subtab 1</h1>
          <h1>Subtab 2</h1>
          <h1>Subtab 3</h1>
        </div>
        <div class="info">
          <div class="detail_grid">
            <div>
              <h1>
                Flexible scrollable Detail
              </h1>
            </div>
            <h1>
              We want this scrollable too
            </h1>
            <h1>
              Flexible scrollable Detail
            </h1>
            <h1>
              Flexible Detail
            </h1>
            <h1>
              Flexible Detail
            </h1>
            <h1>
              Flexible Detail
            </h1>
          </div>
          <h1>
            Flexible Detail
          </h1>
          <h1>
            Flexible Detail
          </h1>
          <h1>
            Flexible Detail
          </h1>
          <h1>
            Flexible Detail
          </h1>

        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

App should be contained in the viewport - absolutely no scrolling/overflowing outside main screen.

好的，您显然已经定义了应用和标签栏的高度。

element {
  --appbar-height: 6em;
}
element {
  --tabbar-height: 6em;
}

根据这些信息，您可以calc()确定第三个元素的高度。

.maintab {
   height: (100vh - 12em);
   overflow: auto;
}

现在布局将保持在视口范围内（即，浏览器上没有滚动条 window）。

revised fiddle

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#root {
  max-height: 100vh;
}

/* REMOVED FOR DEMO; not doing anything; heights added below
element {
  --appbar-height: 6em;
}

element {
  --tabbar-height: 6em;
}  */

.maingrid {
  display: grid;
  grid-template-columns: auto 80% auto;
  grid-template-rows: var(--appbar-height) var(--tabbar-height) 80%;
}

.nav {
  grid-row: 1;
  grid-column: 2/3;
  z-index: 3;
  position: relative;
  background: aqua; /* adjusted blue; easier to read text */
  display: grid;
  grid-template-columns: repeat(2,50%);
  
  height: 6em; /* brought it from non-working code above */

}

.mainTabrow {
  grid-row: 2;
  grid-column: 2;
  z-index: 3;
  position: relative;
  background: green;
  display: grid;
  grid-template-columns: repeat(5,20%);
  
    height: 6em; /* brought it from non-working code above */

}

.maintab {
  grid-row: 3;
  grid-column: 2;
  z-index: 3;
  position: relative;
  align-items: start;
  
  height: calc(100vh - 12em); /* NEW */
  overflow: auto; /* NEW */
}

.detail {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 2fr var(--tabbar-height) 33fr;
  background: grey;
}

.summary {
  grid-row: 1;
  background: yellow;
}

.subtab {
  grid-row: 2;
  width: 100%;
  background: orange;
  display: grid;
  grid-template-columns: repeat(3,33.333%);
}

.info {
  grid-row: 3;
  overflow: auto;
}

.detail_grid {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 1fr 1fr 1fr;
  background: red;
}

<html>

  <body>
    <div id="root">
      <div class="maingrid">
        <div class="nav">
          <h3>
          Search Bar
          </h3>
          <h3>
          Inside App bar
          </h3>
        </div>
        <div class="mainTabrow">
                  <h3>
            Tab 1
          </h3>
          <h3>
          Tab 2
          </h3>
          <h3>
          Tab 3
          </h3>
          <h3>
          Tab 4
          </h3>
          <h3>
          Tab 5
          </h3>
        </div>

        <div class="maintab">
          <div class="detail">
            <div class="summary">
              <div>
                <h1>Flexible Summary Inside 1st Tab - we want this to be scrollable</h1>
              </div>
            </div>
            <div class="subtab">
              <h1>Subtab 1</h1>
              <h1>Subtab 2</h1>
              <h1>Subtab 3</h1>
            </div>
            <div class="info">
              <div class="detail_grid">
                <div>
                  <h1>
                Flexible scrollable Detail
              </h1>
                </div>
                <h1>
                We want this scrollable too
              </h1>
                <h1>
                Flexible scrollable Detail
              </h1>
                <h1>
                Flexible Detail
              </h1>
                <h1>
                Flexible Detail
              </h1>
                <h1>
                Flexible Detail
              </h1>
              </div>
              <h1>
                Flexible Detail
              </h1>
              <h1>
                Flexible Detail
              </h1>
              <h1>
                Flexible Detail
              </h1>
              <h1>
                Flexible Detail
              </h1>

            </div>
          </div>
        </div>
      </div>
    </div>
    
    </body>
    </html>

使用 CSS 网格的移动 Web 应用程序布局 - 如何使行灵活？

Mobile Web App layout using CSS Grid - how to make rows flex?

html

css

css-grid