html - VueJS Tailwind 自身包含 div 而不会影响其他人
问题描述
所以，我在这里绝对疯了。我附上了一张显示问题的图片。如下：
- 右边的布局是一个用户列表
- 聊天的中间内容应该是y-scroll
- 底部 div 应锁定到位，不能移动。
出于某种原因，现在滚动的工作方式无处不在，我觉得我应该做得更好。对我来说，它只是感觉“不对劲”。我通常是一个后端人员，我正在为此苦苦挣扎，我不知道如何最好地解决这个问题。
我已附上我的代码以寻求帮助，谢谢！
<div class="w-full">
<div class="sm:hidden">
<label for="tabs" class="sr-only">Select a tab</label>
<select id="tabs" name="tabs" class="block w-full focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 dark:border-gray-600">
<option>Room 1</option>
<option>Room 2</option>
<option>Room 3</option>
<option>Room 4</option>
</select>
</div>
<div class="hidden sm:block sticky top-0 z-10">
<div class="border-b border-gray-200 dark:border-gray-600">
<nav class="-mb-px flex bg-white dark:bg-gray-900" aria-label="Tabs"><a href="#" class="bg-indigo-800 text-gray-50 w-1/4 py-4 px-1 text-center border-b-2 dark:text-gray-50 dark:border-gray-600 font-medium text-sm" aria-current="page">Room 1</a><a href="#" class="text-gray-500 hover:text-gray-700 hover:border-indigo-300 w-1/4 py-4 px-1 text-center border-b-2 dark:text-gray-50 dark:border-gray-600 font-medium text-sm">Room 2</a><a href="#" class="text-gray-500 hover:text-gray-700 hover:border-indigo-300 w-1/4 py-4 px-1 text-center border-b-2 dark:text-gray-50 dark:border-gray-600 font-medium text-sm">Room 3</a><a href="#" class="text-gray-500 hover:text-gray-700 hover:border-indigo-300 w-1/4 py-4 px-1 text-center border-b-2 dark:text-gray-50 dark:border-gray-600 font-medium text-sm">Room 4</a></nav>
</div>
</div>
<section class="h-full w-full flex-1 flex scrollbar-thin hover:scrollbar-thumb-indigo-700 dark:hover:scrollbar-thumb-indigo-700 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thumb-gray-400 scrollbar-track-gray-50 overflow-y-scroll">
<ul class="divide-y dark:divide-gray-700 divide-dotted divide-gray-200 w-full">
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
<li class="bg-gray-300 py-2 px-3">
<div class="flex space-x-3">
<img class="h-6 w-6 rounded-full" src="https://images.unsplash.com/photo-1480455624313-e29b44bbfde1?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8bWFsZXxlbnwwfHwwfHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=900&q=60" alt="">
<div class="flex-1 space-y-1">
<div class="flex items-center justify-between">
<h3 class="text-sm font-medium">Username</h3>
<p class="text-sm text-gray-500 dark:text-gray-200">1h</p>
</div>
<div class="flex items-center justify-between">
<p class="text-sm text-gray-500">test</p>
<p class="text-sm bg-blue-500 p-1 rounded text-gray-50">public</p>
</div>
</div>
</div>
</li>
</ul>
</section>
<section aria-labelledby="chat-footer" class="h-auto w-full sticky shadow-2xl bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-900 border-l dark:border-gray-800 border-gray-200 bottom-0 min-w-full flex-1 flex flex-col lg:order-last">
<div>
<span class="pl-10 pt-2 relative z-0 inline-flex shadow-sm rounded-md">
<button type="button" class="relative inline-flex items-center px-3 py-1 rounded-l-md border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"></path>
</svg>
</button>
<button type="button" class="-ml-px relative inline-flex items-center px-3 py-1 border border-gray-300 bg-white dark:border-gray-700 dark:bg-gray-900 text-sm font-medium text-gray-700 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-4 h-4 text-gray-600 dark:text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path>
</svg>
</button>
<div class="relative inline-block text-left">
<div>
<button id="headlessui-menu-button-1" type="button" aria-haspopup="true" class="-ml-px relative inline-flex items-center px-3 py-2 rounded-r-md border border-gray-300 bg-white dark:bg-gray-900 dark:border-gray-700 dark:hover:bg-gray-600 text-sm font-medium text-gray-700 dark:text-gray-50 hover:bg-gray-50 focus:z-10 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
Send Option
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="-mr-1 ml-2 h-5 w-5">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<!---->
</div>
</span>
<div class="pr-10 pl-10 pb-5 h-full mt-1 flex rounded-md shadow-sm">
<div class="relative flex items-stretch flex-grow focus-within:z-10">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-400">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
</svg>
</div>
<input type="text" name="email" id="email" class="focus:ring-indigo-500 focus:border-indigo-500 block w-full rounded-none rounded-l-md pl-10 sm:text-sm border-gray-300" placeholder="Type your message...">
</div>
<button id="switchTheme" class="-ml-px bg-indigo-700 relative inline-flex items-center space-x-2 px-4 py-1 border border-gray-300 dark:border-transparent text-sm font-medium rounded-r-md text-gray-700 bg-transparent hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-50">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
<span class="text-gray-50">Send</span>
</button>
</div>
</div>
</section>
</div>
解决方案
我认为您只想制作外部 div flex 列（flex-col），然后设置最大高度（max-h-screen）..
<div class="w-full flex flex-col max-h-screen">
<div class="sm:hidden">
</div>
<section class="w-full flex scrollbar-thin hover:scrollbar-thumb-indigo-700 dark:hover:scrollbar-thumb-indigo-700 dark:scrollbar-thumb-gray-600 dark:scrollbar-track-gray-800 scrollbar-thumb-gray-400 scrollbar-track-gray-50 overflow-y-scroll">
</section>
<section aria-labelledby="chat-footer" class="h-auto w-full sticky shadow-2xl bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-gray-900 border-l dark:border-gray-800 border-gray-200 bottom-0 min-w-full flex-1 flex flex-col lg:order-last">
</section>
</div>
推荐阅读
- python - SQLite中如何声明日期和年份的数据类型？
- php - 如何将具有相同ID和名称的多个输入类型号相乘
- android - 设备支持随 AndroidX 迁移而变化吗？
- c# - 错误 CS0019：运算符 * 不能应用于“Vector3”和“Vector3”类型的操作数
- angular-material - 将组件样式（css）相互叠加
- azure - Azure Storage SDK for Java V8 是与表存储一起使用的最新版本吗？
- angular - Npm 漏洞 Angular 7
- c# - 从 3d 空间中的一组点移动到具有最短可能累积距离的另一组点
- sql - 使用 Oracle 查询内连接
- javascript - JS 将字符串转换为 json 对象