如何用Tailwind CSS将#friends元素移至右上角并填充空间？

核心思路 #

通过Tailwind的Grid+Flex布局重构页面结构，替代原有的jQuery手动尺寸计算，让#friends自动填充右上角区域，同时保证左侧内容自适应窗口大小。

修改步骤及完整代码 #

1. 重构根容器为Grid布局，拆分左右两栏，右侧固定宽度用于放置好友栏；左侧栏垂直排列消息相关内容。
2. 左侧内容容器改为Flex垂直布局，让消息区域自动分配剩余空间，无需JS计算。
3. 移除冗余的jQuery尺寸计算逻辑，依赖Tailwind的自适应类实现响应式。

<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.tailwindcss.com"></script> <!-- 引入Tailwind CDN确保样式生效 -->
        <script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>
        <title>PM</title>
        <style>
          .margin-left{
               margin-left: 10px;
          }
        </style>
    </head>
    <body class="h-screen overflow-hidden"> <!-- 让页面占满屏幕，消除多余滚动条 -->
        <div class="content grid grid-cols-[1fr_260px] h-full gap-4 p-4"> <!-- Grid布局，右侧栏固定260px可按需调整 -->
            <!-- 左侧消息区域容器：垂直排列子元素 -->
            <div class="flex flex-col gap-3">
                <div id='pm-header' class="margin-left shadow shadow-gray-50 border-cyan-100 border-solid border-2 overflow-hidden flex-1">
                    <!-- 头部内容占位 -->
                </div>
                <div id="box" class="margin-left border-2 border-solid border-gray-500 flex-1 overflow-auto">
                    <!-- 消息内容占位 -->
                </div>
                <input class='mx-3' type="text" id="snd" placeholder="输入消息">
            </div>
            <!-- 右上角好友栏 -->
            <div id="friends" class="border-2 border-solid border-gray-500 h-full">
                <!-- 好友列表内容占位 -->
            </div>
        </div>
    </body>
    <script>
        // 移除原resize函数，布局由Tailwind自动适配窗口变化
    </script>
</html>

关键改动说明 #

• body.h-screen overflow-hidden：确保页面铺满屏幕，避免不必要的滚动。
• .content.grid grid-cols-[1fr_260px]：左侧栏占满剩余空间，右侧栏固定宽度，精准划分布局区域。
• 左侧容器.flex flex-col+子元素flex-1：让pm-header和box自动分配剩余高度，无需手动计算尺寸。
• #friends.h-full：让好友栏自动填充右侧栏的整个高度，实现右上角区域的完全覆盖。

内容的提问来源于stack exchange，提问作者Michael