固定页眉和页脚，在1fr CSS grid区域内具有可滚动边栏

我有一个webapp的CSS网格布局，具有固定大小的页眉和页脚（用rem单位定义）和可扩展的中心行（定义为1fr ），其中包含两个侧边栏和一个中央内容区域。外栅格容器被定义为宽度和高度以填充视口（100vw/vh）。我希望中心行占用页眉和页脚之间的所有空间，并且要让任何溢出滚动，而不是扩大页面的高度。固定页眉和页脚，在1fr CSS grid区域内具有可滚动边栏

我试过各种可能的解决方案，包括使用overflow-y:scroll，但似乎没有任何工作。额外的内容使页面更长，而不是使区域可滚动。

我不想为中心行使用固定大小，因为我希望它扩大以适应任意大的屏幕。

这里是我的布局相当小例子：

https://codepen.io/Shepazu/pen/EwePgB

（请注意，在HTML和CSS嵌套区域是故意的，因此任何解决方案应该是CSS而已，不应改变。HTML标记）

来源

2017-10-13 Doug Schepers

欢迎堆栈溢出！寻求代码帮助的问题必须包含在问题本身中重现**所需的最短代码**最好在[** Stack Snippet **]中（https://blog.stackoverflow.com/2014/09/introducing-runnable） -javascript-CSS-和HTML的代码段/）。 –

这是你在找什么？ https://codepen.io/solbreslin/pen/pWOybz – sol

假设页眉和页脚的固定高度为100像素，然后给样式到内容区域：

.center-row { 
max-height: calc(100vh - 200px); 
overflow-y: auto; 
}

来源

2017-10-13 10:01:52 Vishnu

这似乎是一个好开始！它似乎不适合我，可能是因为嵌套网格，但我会继续玩'calc'和'max-height'的想法，我会让你知道如果解决了它。谢谢！ –

固定页眉和页脚，在1fr CSS grid区域内具有可滚动边栏

回答

相关问题