顺风CSS:使用滚动框创建单个页面应用程序
顺风CSS:使用滚动框创建单个页面应用程序
提问于 2022-01-07 17:38:57
我正在创建一个基于TailWind CSS组件这里的聊天应用程序。基本上，它将页面分成两列:侧边栏和聊天内容部分。chat content部分有两行:带滚动聊天消息的顶行和固定在屏幕底部的底部输入行。这个布局是可行的。聊天消息部分滚动，其他什么也做不到。太棒了！
现在，我试图修改它，以添加一个导航条(导航栏)的顶部，总是可见的。为此，我创建了一个两行部分，其中导航栏是顶部行，页的其余部分是底部行。这也起作用了。当我希望navbar大于一行时(通过向navbar类添加"h-40“)，问题就开始了，然后整个页面开始滚动我添加到navbar中的数量。
下面是添加h-40的代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example Layout</title>
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.min.css">
</head>
<body class="bg-gray-200">
<div class="flex h-screen antialiased text-gray-800 bg-blue-700">
<div class="flex flex-row h-full w-full overflow-x-hidden">
<div class="flex flex-col flex-auto flex-shrink-0 h-full w-full bg-gray-700">
<!-- This is where I added in the h-40 -->
<div class="flex flex-row h-40 w-full bg-green-500 flex-shrink-0">
<!-- <div class="flex flex-row w-full bg-green-500 flex-shrink-0"> -->
This is a NavBar
</div>
<div class="flex flex-row h-full w-full bg-green-500">
<div class="flex flex-col py-8 pl-6 pr-2 w-64 bg-white flex-shrink-0">
I'm a side bar
</div>
<div class="flex flex-col flex-auto h-full p-6 bg-gray-700">
<div class="flex flex-col flex-auto flex-shrink-0 rounded-2xl bg-yellow-500 h-full p-4">
<div class="flex flex-col h-full overflow-x-auto mb-4 ">
<div class="flex flex-col h-full bg-red-700">
<div class="grid grid-cols-12 gap-y-2 bg-green-700">
Chat messages
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 1</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 2</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 3</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 4</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 5</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 6</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 7</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 8</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 9</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 10</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 11</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 12</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 13</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 14</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 15</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 16</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 17</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 18</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 19</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 20</div> </div> </div> </div>
<div class="col-start-1 col-end-8 p-3 rounded-lg"> <div class="flex flex-row items-center"> <div class="flex items-center justify-center h-10 w-10 rounded-full bg-indigo-500 flex-shrink-0"> A </div> <div class="relative ml-3 text-sm bg-white py-2 px-4 shadow rounded-xl"> <div> Message 21</div> </div> </div> </div>
</div>
</div>
</div>
<div class="flex flex-row items-center h-16 rounded-xl bg-blue-700 w-full px-4">
Input box
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
如何拥有一个垂直大小的可变导航栏，让整个页面都停留在屏幕上，只有聊天消息滚动？
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-01-07 18:21:17
我不确定为什么顺风支持calc()函数，但是可以使用内联样式来实现。只需将height: 'calc(100vh - 10rem)'添加到父级
<div class="flex flex-col flex-auto h-full p-6 bg-gray-700">线，它就能做到这一点。顺便说一下，100 40 10 rem是因为根据顺风文件h-40是高度10雷姆。你可以从视口高度删除10雷姆并得到你的价值。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70625130
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号