使用 CSS 网格的移动 Web 应用程序布局 - 如何使行灵活?
Mobile Web App layout using CSS Grid - how to make rows flex?
我正在尝试创建一个 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>
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)。
*,
*: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>
我正在尝试创建一个 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>
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)。
*,
*: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>