我正在基于此處找到的 TailWind CSS 組件創建一個聊天應用程式。基本上，它將頁面分為兩列：側邊欄和聊天內容部分。聊天內容部分有兩行：第一行包含滾動的聊天訊息，底部輸入行固定在螢屏底部。這種布局有效。聊天訊息部分滾動，沒有其他內容。極好的！
現在，我正在嘗試對其進行修改以在始終可見的頂部添加一個導航欄（導航欄）。為此，我創建了一個兩行部分，其中導航欄是頂行，頁面的其余部分是底行。這也有效。當我希望導航欄大于單行時（通過在導航欄類中添加“h-40”），問題就開始了，然后整個頁面開始滾動我添加到導航欄的數量。
這是添加了 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/[email protected]/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 > -->
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>如何擁有一個可變垂直大小的導航欄，并讓整個頁面停留在螢屏上，只滾動聊天訊息？
uj5u.com熱心網友回復：
我不確定 tailwind 是否支持 calc() 函式，但您可以使用行內樣式來實作。只需添加height: 'calc(100vh - 10rem)'到您的父母
<div >線，它會做的伎倆。順便說一句，100vh - 10rem 是因為根據順風檔案 h-40 的高度是 10 rem。您將從視口高度移除 10rem 并獲得您的價值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/405471.html
標籤：