问题描述
<div class="flex flex-grow h-full w-100">
<div class="flex flex-col bg-white w-1/5">
<div class="dates px-4">
<p>Today</p>
<p>Tomorrow</p>
<p>Upcoming</p>
</div>
<hr />
<div class="projects flex-grow px-4">
<p>Project 1</p>
<p>Project 2</p>
</div>
<div class="footer">
<hr />
<button class="outline-none py-2 border-gray-400 text-red-400 w-full">
Add project
</button>
</div>
</div>
<div class="main bg-gray-100 flex-grow">Hello</div>
<div class="bg-white w-1/5">Hello</div>
</div>
在上面的代码中,我只希望将projects
和dates
固定在其位置的同时滚动类为footer
的div。如何使用tailwind.css做到这一点?我还希望类main
的div可垂直滚动,同时将其他两个div固定在其位置而不滚动。
解决方法
听起来有点像overflow-y的常用用法。
例如,您可以将此CSS
规则添加到项目的类中:
.projects {
overflow-y: scroll;
}
您可以将此规则添加到要滚动的任何容器中-在这种情况下为垂直滚动。
另一方面,水平滚动有overflow-x: scroll,而水平滚动有overflow: scroll。
,根据tailwind overflow guide,您可以使用.overflow-y-auto
进行垂直滚动。
例如
<div class="projects flex-grow overflow-y-auto px-4">
使用.flex-grow
很好,否则必须为div设置最大高度。