使用-transform-x-2/3实现侧边栏滑出时如何让主体内容自适应宽度

DevOps 小满

2026-10-1

问题根源

CSS transform 属性仅会在视觉层面偏移元素，不会改变元素在正常文档流中的实际占位，因此外层flex容器始终会为侧边栏预留w-3/12对应的宽度，导致主内容左侧出现固定空白。

推荐解决方案（侧边栏悬浮不占文档流）

该方案改动最小，动画流畅，侧边栏展开时悬浮在主内容上方，不会挤压主内容布局：

需修改的节点：

侧边栏的父容器（类为 flex flex-wrap bg-gray-100 w-full h-screen 的div）新增 relative 类，作为侧边栏绝对定位的参照
侧边栏（id为pid的div）新增absolute left-0 top-0 z-10类，脱离正常文档流，同时新增onmouseout="displayHide()"事件实现鼠标移出自动收起

修改后完整代码：

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/css/style.css" rel="stylesheet">
</head>
<body>
    <div class="h-screen overflow-hidden flex items-center justify-center" style="background: #edf2f7;">
        <!-- 父容器新增relative类 -->
        <div class="flex flex-wrap bg-gray-100 w-full h-screen relative">
            <!-- Sidebar 新增absolute left-0 top-0 z-10，新增onmouseout事件 -->
            <div class="w-3/12 h-full bg-white rounded p-3 shadow-lg transform -translate-x-2/3 transition duration-500 ease-in-out absolute left-0 top-0 z-10"
                id="pid" onmouseover="displayShow()" onmouseout="displayHide()">
                <div class="flex items-center space-x-4 p-2 mb-5">
                    <img class="h-12 rounded-full"
                        src="http://www.gravatar.com/avatar/2acfb745ecf9d4dccb3364752d17f65f?s=260&amp;d=mp"
                        alt="James Bhatta">
                    <div>
                        <h4 class="font-semibold text-lg text-gray-700 capitalize font-poppins tracking-wide">James
                            Bhatta</h4>
                        <span class="text-sm tracking-wide flex items-center space-x-1">
                            <svg class="h-4 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z">
                                </path>
                            </svg>
                            <span class="text-gray-600">Verified</span>
                        </span>
                    </div>
                </div>
                <ul class="space-y-2 text-sm">
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
                                    </path>
                                </svg>
                            </span>
                            <span>Dashboard</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
                                    </path>
                                </svg>
                            </span>
                            <span>Notifications</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z">
                                    </path>
                                </svg>
                            </span>
                            <span>Personal messages</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                            </span>
                            <span>My profile</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4">
                                    </path>
                                </svg>
                            </span>
                            <span>Settings</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                                    </path>
                                </svg>
                            </span>
                            <span>Change password</span>
                        </a>
                    </li>
                    <li>
                        <a href="#"
                            class="flex items-center space-x-3 text-gray-700 p-2 rounded-md font-medium hover:bg-gray-200 focus:bg-gray-200 focus:shadow-outline">
                            <span class="text-gray-600">
                                <svg class="h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1">
                                    </path>
                                </svg>
                            </span>
                            <span>Logout</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="flex-grow" id="mainContent">
                <div class="p-4 text-gray-500">
                    Content here...
                    <div class="inline-flex">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        function displayHide() {
            document.getElementById("pid").classList.add("-translate-x-2/3");
        }
        function displayShow() {
            document.getElementById("pid").classList.remove("-translate-x-2/3");
        }
    </script>
</body>

可选方案（侧边栏不覆盖主内容）

如果需要侧边栏展开时挤压主内容而不是覆盖，可将transform逻辑替换为动态修改宽度：

移除侧边栏所有transform相关类，默认宽度设为w-1/12
展开时切换为w-3/12，收起时切回w-1/12，flex容器会自动调整主内容宽度，不会出现空白。

内容的提问来源于stack exchange，提问作者developer-iname

使用-transform-x-2/3实现侧边栏滑出时如何让主体内容自适应宽度

问题根源 #

推荐解决方案（侧边栏悬浮不占文档流） #

需修改的节点： #

修改后完整代码： #

可选方案（侧边栏不覆盖主内容） #

问题根源

推荐解决方案（侧边栏悬浮不占文档流）

需修改的节点：

修改后完整代码：

可选方案（侧边栏不覆盖主内容）