保持一列固定，而其他列滚动
保持一列固定，而其他列滚动
提问于 2019-08-27 17:09:02
我正在使用Tailwind CSS 1.1.2，想知道如何创建一个两列布局，其中一列是固定的，而另一列是垂直滚动的。
有关参考，请参阅https://vimeo.com/350933479#t=46s。
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-08-31 16:40:04
TailwindCSS的创建者亚当·瓦森制作了一个Slack clone，它完全可以做你想要的，这里有一个更基本的例子和解释为什么它是这样的：
示例：
<div class="h-screen flex">
<!-- Fixed sidebar -->
<div class="bg-gray-600 w-64">
<!-- Sidebar content -->
</div>
<!-- Scroll wrapper -->
<div class="flex-1 flex overflow-hidden">
<!-- Scrollable container -->
<div class="flex-1 overflow-y-scroll">
<!-- Your content -->
</div>
</div>
</div>flex解释父元素有flex和h-screen类，所以它填充了屏幕的高度。
在它的内部，固定的列应用了一定的宽度，或者它可以是一个弹性列，共享屏幕的某个部分。
使用flex-1、flex和overflow-hidden类将可滚动列包装在div中，以确保它填满了可用的空间，但隐藏了溢出的内容。
在可滚动包装器内部有另一个div，它是您的可滚动内容区域，使用flex-1，因此它扩展到可用空间，并在溢出时使用overflow-y-scroll进行滚动。这是一个稍微更具风格的fiddle，希望这能有所帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57671255
复制相关文章
相似问题
腾讯云开发者
