一些背景
给定覆盖整个视区的2x5 css grid，定义如下:
#grid-wrapper {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50px 50px 50px calc(100vh - 200px) 50px;
grid-template-areas:
"header header"
"common-toolbar common-toolbar"
"left-toolbar right-toolbar"
"left-panel right-panel"
"footer footer";
width: 100vw;
height: 100vh;
}
left-panel和right-panel网格单元都是overflow-y: scroll;可滚动的div.
This setup works as intended.
问题是
我希望common-toolbar和(left/right)-toolbar的行高不被定义为固定的(50px)高度，而是自动调整到它们的内容高度(工具栏高度，这不是静态的)，而(left/right)-panel仍然采取可用的viewport高度的其余部分.
类似于:
grid-template-rows: 50px auto auto calc(100vh - sum_of_height_of_other_rows) 50px;
这能在grid米内实现吗？
编辑:代码段
const squares = [
['■', 'Black square'],
['□', 'White square'],
['▢', 'White square with rounded corners'],
['▣', 'White square containing small black square'],
['▤', 'Square with horizontal fill'],
['▥', 'Square with vertical fill'],
['▦', 'Square with orthogonal crosshatch fill'],
['▧', 'Square with upper left to lower right fill'],
['▨', 'Square with upper right to lower left fill'],
['▩', 'Square with diagonal crosshatch fill '],
]
const fruits = [
['☕', 'hot beverage'],
['⛾', 'restaurant'],
['🍅', 'tomato'],
['🍊', 'tangerine'],
['🍏', 'green apple'],
['🥑', 'avocado'],
['🍔', 'hamburger'],
['🍕', 'slice of pizza'],
['🍙', 'rice ball'],
['🍞', 'bread'],
['🍣', 'sushi'],
['🍨', 'ice cream'],
['🍭', 'lollipop'],
['🍲', 'pot of food'],
['🍷', 'wine glass'],
['🍼', 'baby bottle'],
['🍓', 'strawberry'],
]
const chess = [
['♔', 'white chess king'],
['♕', 'white chess queen'],
['♖', 'white chess rook'],
['♗', 'white chess bishop'],
['♘', 'white chess knight'],
['♙', 'white chess pawn'],
['♚', 'black chess king'],
['♛', 'black chess queen'],
['♜', 'black chess rook'],
['♝', 'black chess bishop'],
['♞', 'black chess knight'],
['♟', 'black chess pawn']
]
const fillToolbar = (toolbar, fillWith) => {
fillWith.forEach(([symbol, name]) => {
const $button = document.createElement('button')
$button.setAttribute("title", name)
$button.textContent = symbol;
toolbar.append($button)
})
}
fillToolbar(document.getElementById("common-toolbar"), squares)
fillToolbar(document.getElementById("left-toolbar"), fruits)
fillToolbar(document.getElementById("right-toolbar"), chess)
const fillText = (panel, count) => {
panel.innerHTML = '';
if (count > 0) {
panel.innerHTML =
"<p>start.<p> "
+ "<p>THE TEXT IS HERE LONG.<p> ".repeat(count)
+ "<p>end.<p> "
}
}
const count = 1000;
fillText(document.getElementById("left-panel"), count)
fillText(document.getElementById("right-panel-content"), count)body {
margin: 0;
}
#grid-wrapper {
display: grid;
grid-template-columns: calc(50%-5px) 50%;
grid-template-rows: 50px 50px 50px calc(100vh - 200px) 50px;
grid-template-areas:
"header header"
"common-toolbar common-toolbar"
"left-toolbar right-toolbar"
"left-panel right-panel"
"footer footer";
width: 100vw;
height: 100vh;
column-gap: 10px;
}
#header {
background-color: aqua;
grid-column: span 2;
grid-area: header;
}
#common-toolbar {
background-color: blue;
grid-column: span 2;
grid-area: common-toolbar;
}
#left-toolbar {
background-color: blueviolet;
grid-area: left-toolbar;
}
#left-panel {
background-color: brown;
grid-area: left-panel;
overflow-y: scroll;
}
#right-toolbar {
background-color: chartreuse;
grid-area: right-toolbar;
}
#right-panel {
background-color: chocolate;
grid-area: right-panel;
}
#right-panel-content {
overflow-y: scroll;
height: 100%;
}
#footer {
background-color: crimson;
grid-column: span 2;
grid-area: footer;
}<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test box</title>
</head>
<body>
<div id="grid-wrapper">
<div id="header">The head</div>
<div id="common-toolbar">Common Toolbar 1 2 3</div>
<div id="left-toolbar"></div>
<div id="left-panel"><div id="left-panel-content"></div></div>
<div id="right-toolbar">Right Toolbar l1 l2 l3</div>
<div id="right-panel"><div id="right-panel-content"></div></div>
<div id="footer">This is the footer</div>
</div>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>