我正在尝试创建一个 Web 应用程序来替换 native Android 应用程序 - 因此它可以在 iOS/Mac/Windows/Ubuntu 上运行!
我开始使用 Flexbox - 但浏览器实现中存在太多错误和不兼容性。所以我使用新推出的CSS Grid,它看起来更强大并且适合App布局。
布局是:顶部有一个应用程序栏,以及一个选项卡栏,可让您在多个 View 之间切换 - 每个 View 都是其自己的 CSS 网格 - 具有灵活和固定的内容。
我无法让内部元素在高度上 flex 并获得屏幕上的所有可用空间,并且不会被切断或落在视口(viewport)之外,因此应用程序应该包含在视口(viewport)中,绝对不会在主屏幕之外滚动/溢出。
我该如何实现这一目标?如何指定一行来填充屏幕的可用高度而不是更多?
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;
}
现在布局将保留在视口(viewport)的范围内(即浏览器窗口上没有滚动条)。
*,
*: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>
关于html - 使用 CSS 网格的移动 Web 应用程序布局 - 如何使行灵活?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43336164/