如何设置 parent div 宽度占屏幕尺寸的百分比 (HTML, CSS)
How to set parent div width as a percentage of the screen size (HTML, CSS)
我是前端 Web 开发的新手，我只是想解决这个问题，因为前端团队（这是一个大学项目）正在努力解决这个问题。
我们正在使用 laravel 进行开发，其中有许多 pre-made class，因此您不必对它们进行编码（例如，您可以 flex-col， overflow-x-hidden 等）。不用担心，如果你不知道它是什么，我可以用普通的 HTML 找到等价的 laravel class。
问题
我需要 parent div 的宽度是屏幕宽度的百分比。如果您查看下图，您会看到一个绿色和红色的容器。
它们都放在一个 parent 容器中。例如，我希望 parent 容器占屏幕宽度的 70%，以便它根据屏幕尺寸进行缩放。但是，当我应用最大宽度之类的东西时，它什么也没做。
经过一些研究，似乎只有当容器有 parent 容器时才可以将宽度设置为百分比，所以我不确定该怎么做。我用谷歌搜索并查看了一些关于堆栈溢出的更多问题，但所有这些问题都集中在已经对我有用的最大高度上。
代码
此代码包括图像中除顶部栏外的所有内容。我们还在右侧添加了一个通知栏。
<x-app-layout>
<!-- Sidebar -->
<div class="fixed flex flex-col top-14 left-0 w-14 h-1/3 hover:w-64 md:w-64 dark:bg-gray-900 h-full text-white transition-all duration-300 border-none z-10 sidebar">
<div class="overflow-y-auto overflow-x-hidden flex flex-col justify-between flex-grow bg-blue-700">
<ul class="flex flex-col py-4 space-y-1 bg-blue-700">
<li class="px-5 md:block bg-blue-700">
<div class="flex flex-column items-center h-8 bg-blue-700">
<span class=" bg-blue-700 text-sm font-light tracking-wide uppercase text-gray-400">
Dashboard
</span>
</div>
</li>
<li>
<a href="#" class="relative flex flex-column items-center h-11 focus:outline-none hover:bg-blue-800 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-500 dark:hover:border-gray-800 pr-6">
<span class="inline-flex justify-center items-center ml-4">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
</span>
<span class="ml-2 text-sm tracking-wide uppercase font-bold truncate">Overview</span>
</a>
</li>
<li>
<a href="#" class="relative flex flex-column items-center h-11 focus:outline-none hover:bg-blue-800 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-500 dark:hover:border-gray-800 pr-6">
<span class="inline-flex justify-center items-center ml-4">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
</span>
<span class="ml-2 text-sm tracking-wide uppercase font-bold truncate">Loans</span>
</a>
</li>
<!-- Board end -->
<li>
<a href="#" class="relative flex flex-column items-center h-11 focus:outline-none hover:bg-blue-800 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-500 dark:hover:border-gray-800 pr-6">
<span class="inline-flex justify-center items-center ml-4">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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 class="ml-2 text-sm tracking-wide uppercase font-bold truncate">Lenders</span>
</a>
</li>
<li>
<a href="#" class="relative flex flex-column items-center h-11 mt-80 mb-10 focus:outline-none hover:bg-blue-700 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-600 dark:hover:border-gray-800 pr-6">
<span class="inline-flex justify-center items-center ml-4">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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>
<span class="ml-2 text-sm tracking-wide truncate">Settings</span>
</a>
</li>
</ul>
<p class="mb-14 px-5 py-3 hidden md:block text-center text-xs">IRC @2021</p>
</div>
</div>
<!--Sidebar FINISHED-->
<!--Dashboard Container START-->
<div class="fixed flex top-14 left-14 md:left-64 w-96 h-full">
<div class="overflow-y-auto overflow-x-hidden flex flex-col justify-between flex-grow bg-blue-700 inline-block"> <!--background is blue just to see parent div-->
<!--Notification Bar Container-->
<div class="absolute fixed flex flex-col right-0 w-60 overflow-y-auto overflow-x-hidden">
<ul class="flex flex-col items-center py-4 justify-between">
<li>
<span class="text-sm font-bold tracking-wide uppercase text-black">Notifications</span>
</li>
<li class="pl-2">
<span class = "pb-12 font-black tracking-wide text-red-600">Your Payment is due in 5 Days! </span>
</li>
<li class="pl-2">
<span class="pb-12 tracking-wide float-right text-red-400 font-medium">Verify your email address!</span>
</li>
<li class="pl-2">
<span class="pb-12 tracking-wide float-right text-red-400 font-medium">Please update your IRD number!</span>
</li>
</ul>
</div>
<!--Notification Bar FINISH-->
<!-- Overview Container-->
<div class="fixed flex flex-col top-14 left-14 md:left-64 w-7/12 h-full text-white border-none">
<div class="overflow-y-auto overflow-x-hidden flex flex-col justify-between bg-white">
<ul class="flex flex-col py-4 space-y-1 bg-white">
<li class="inline-block ml-2 flex flex-grow justify-between">
<span class="text-sm font-bold tracking-wide uppercase text-black bg-white">Total Loan Balance</span>
<!--3 Loans Section-->
<span class="text-gray-400 items-center text-sm uppercase bg-blue flex flex-col bg-white">
<span class="text-3xl">3</span>
<span class="">loans</span>
</span>
</li>
<li class="inline-block ml-2 flex flex-grow justify-between">
<span class="bg-white h-full text-5xl font-medium tracking-wide text-red-500">,380.19</span>
<span class="ml-64 text-black bg-blue flex flex-col bg-white">
<span class="ml-auto text-black">Loan Total: <span class = "text-red-500">,000.00</span> </span>
<span class="ml-auto">Amount Repaid: <span class = "text-red-500">,619.81</span></span>
</span>
</li>
<li class="relative pt-1">
<span class="overflow-hidden h-5 mb-6 ml-2 mr-9 mt-5 text-xs flex rounded bg-white border-2">
<span style="width:20%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500">8.75%</span>
</span>
</li>
<li class="inline-block ml-2 mr-0 flex flex-col justify-between">
<span class="bg-white h-full text-sm font-light tracking-wide text-black">Upcoming Loan Repayment: Loan 1, 28 May 2021</span>
<span class="bg-white mt-2 h-full text-sm font-light tracking-wide text-black">Projected Final Loan Repayment Date: 12 May 2026</span>
</li>
</ul>
</div>
</div>
<!--Overview Container FINISH-->
</div>
</div>
<!--Dashboard Container FINISH-->
</x-app-layout>
如果我将 parent 容器（仪表板容器）宽度设置为静态值，如 24 rems，那么它就可以工作。但是，如果 child 元素比那个大（它们大了很多），那么它们就会延伸到 parent div.
之外
我试过的
在这一点上，我尝试了很多不同的东西：
- 根本不在容器中设置宽度
- 正在将
absolute 添加到所有 child 个容器
- 正在删除 child 个容器的所有尺寸变量，一个接一个，一次全部删除等等
- 去掉所有代码，只添加parent div，只添加通知栏，非常简单。还摆脱了所有尺寸元素。仍然没有任何效果。
经过所有测试后，我得出的结论是，如果我能弄清楚如何将 div 设置为屏幕宽度的百分比，那么我就可以获得所有 child 容器以适应 parent 一个。
感谢所有评论和回答！
我认为你是在寻找视口的宽度，而不是屏幕的宽度（例如，在 windows 设备上，用户可以将视口设置为他们喜欢的任何尺寸）。
正如@apokryfos 所建议的，您可以使用 1vw 作为视口宽度的 1%（类似地，1vh 作为高度）。这将在任何调整大小时自动更改（例如用户将设备从纵向移动到横向或以其他方式调整 window）。
嗨,
有 css 单位称为视口宽度 (vw) 和视口高度 (vh)。
视口需要第一个元标记命名为：<meta name="viewport" content="width=device-width, initial-scale=1.0">.
1 视口宽度指定用户屏幕的 1%，如果您需要 div 全屏的宽度，只需添加 width: 100vw Css 规则。
相同的 1 视口高度指定 1% 的用户屏幕高度。
我是前端 Web 开发的新手，我只是想解决这个问题，因为前端团队（这是一个大学项目）正在努力解决这个问题。
我们正在使用 laravel 进行开发，其中有许多 pre-made class，因此您不必对它们进行编码（例如，您可以 flex-col， overflow-x-hidden 等）。不用担心，如果你不知道它是什么，我可以用普通的 HTML 找到等价的 laravel class。
问题
我需要 parent div 的宽度是屏幕宽度的百分比。如果您查看下图，您会看到一个绿色和红色的容器。
它们都放在一个 parent 容器中。例如，我希望 parent 容器占屏幕宽度的 70%，以便它根据屏幕尺寸进行缩放。但是，当我应用最大宽度之类的东西时，它什么也没做。
经过一些研究，似乎只有当容器有 parent 容器时才可以将宽度设置为百分比，所以我不确定该怎么做。我用谷歌搜索并查看了一些关于堆栈溢出的更多问题，但所有这些问题都集中在已经对我有用的最大高度上。
代码
此代码包括图像中除顶部栏外的所有内容。我们还在右侧添加了一个通知栏。
<x-app-layout>
<!-- Sidebar -->
<div class="fixed flex flex-col top-14 left-0 w-14 h-1/3 hover:w-64 md:w-64 dark:bg-gray-900 h-full text-white transition-all duration-300 border-none z-10 sidebar">
<div class="overflow-y-auto overflow-x-hidden flex flex-col justify-between flex-grow bg-blue-700">
<ul class="flex flex-col py-4 space-y-1 bg-blue-700">
<li class="px-5 md:block bg-blue-700">
<div class="flex flex-column items-center h-8 bg-blue-700">
<span class=" bg-blue-700 text-sm font-light tracking-wide uppercase text-gray-400">
Dashboard
</span>
</div>
</li>
<li>
<a href="#" class="relative flex flex-column items-center h-11 focus:outline-none hover:bg-blue-800 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-500 dark:hover:border-gray-800 pr-6">
<span class="inline-flex justify-center items-center ml-4">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
</span>
<span class="ml-2 text-sm tracking-wide uppercase font-bold truncate">Overview</span>
</a>
</li>
<li>
<a href="#" class="relative flex flex-column items-center h-11 focus:outline-none hover:bg-blue-800 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-500 dark:hover:border-gray-800 pr-6">
<span class="inline-flex justify-center items-center ml-4">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
</span>
<span class="ml-2 text-sm tracking-wide uppercase font-bold truncate">Loans</span>
</a>
</li>
<!-- Board end -->
<li>
<a href="#" class="relative flex flex-column items-center h-11 focus:outline-none hover:bg-blue-800 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-500 dark:hover:border-gray-800 pr-6">
<span class="inline-flex justify-center items-center ml-4">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><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 class="ml-2 text-sm tracking-wide uppercase font-bold truncate">Lenders</span>
</a>
</li>
<li>
<a href="#" class="relative flex flex-column items-center h-11 mt-80 mb-10 focus:outline-none hover:bg-blue-700 dark:hover:bg-gray-600 text-white-600 hover:text-white-800 border-l-4 border-transparent hover:border-blue-600 dark:hover:border-gray-800 pr-6">
<span class="inline-flex justify-center items-center ml-4">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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>
<span class="ml-2 text-sm tracking-wide truncate">Settings</span>
</a>
</li>
</ul>
<p class="mb-14 px-5 py-3 hidden md:block text-center text-xs">IRC @2021</p>
</div>
</div>
<!--Sidebar FINISHED-->
<!--Dashboard Container START-->
<div class="fixed flex top-14 left-14 md:left-64 w-96 h-full">
<div class="overflow-y-auto overflow-x-hidden flex flex-col justify-between flex-grow bg-blue-700 inline-block"> <!--background is blue just to see parent div-->
<!--Notification Bar Container-->
<div class="absolute fixed flex flex-col right-0 w-60 overflow-y-auto overflow-x-hidden">
<ul class="flex flex-col items-center py-4 justify-between">
<li>
<span class="text-sm font-bold tracking-wide uppercase text-black">Notifications</span>
</li>
<li class="pl-2">
<span class = "pb-12 font-black tracking-wide text-red-600">Your Payment is due in 5 Days! </span>
</li>
<li class="pl-2">
<span class="pb-12 tracking-wide float-right text-red-400 font-medium">Verify your email address!</span>
</li>
<li class="pl-2">
<span class="pb-12 tracking-wide float-right text-red-400 font-medium">Please update your IRD number!</span>
</li>
</ul>
</div>
<!--Notification Bar FINISH-->
<!-- Overview Container-->
<div class="fixed flex flex-col top-14 left-14 md:left-64 w-7/12 h-full text-white border-none">
<div class="overflow-y-auto overflow-x-hidden flex flex-col justify-between bg-white">
<ul class="flex flex-col py-4 space-y-1 bg-white">
<li class="inline-block ml-2 flex flex-grow justify-between">
<span class="text-sm font-bold tracking-wide uppercase text-black bg-white">Total Loan Balance</span>
<!--3 Loans Section-->
<span class="text-gray-400 items-center text-sm uppercase bg-blue flex flex-col bg-white">
<span class="text-3xl">3</span>
<span class="">loans</span>
</span>
</li>
<li class="inline-block ml-2 flex flex-grow justify-between">
<span class="bg-white h-full text-5xl font-medium tracking-wide text-red-500">,380.19</span>
<span class="ml-64 text-black bg-blue flex flex-col bg-white">
<span class="ml-auto text-black">Loan Total: <span class = "text-red-500">,000.00</span> </span>
<span class="ml-auto">Amount Repaid: <span class = "text-red-500">,619.81</span></span>
</span>
</li>
<li class="relative pt-1">
<span class="overflow-hidden h-5 mb-6 ml-2 mr-9 mt-5 text-xs flex rounded bg-white border-2">
<span style="width:20%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-green-500">8.75%</span>
</span>
</li>
<li class="inline-block ml-2 mr-0 flex flex-col justify-between">
<span class="bg-white h-full text-sm font-light tracking-wide text-black">Upcoming Loan Repayment: Loan 1, 28 May 2021</span>
<span class="bg-white mt-2 h-full text-sm font-light tracking-wide text-black">Projected Final Loan Repayment Date: 12 May 2026</span>
</li>
</ul>
</div>
</div>
<!--Overview Container FINISH-->
</div>
</div>
<!--Dashboard Container FINISH-->
</x-app-layout>
如果我将 parent 容器（仪表板容器）宽度设置为静态值，如 24 rems，那么它就可以工作。但是，如果 child 元素比那个大（它们大了很多），那么它们就会延伸到 parent div.
之外我试过的
在这一点上，我尝试了很多不同的东西：
- 根本不在容器中设置宽度
- 正在将
absolute添加到所有 child 个容器 - 正在删除 child 个容器的所有尺寸变量，一个接一个，一次全部删除等等
- 去掉所有代码，只添加parent div，只添加通知栏，非常简单。还摆脱了所有尺寸元素。仍然没有任何效果。
经过所有测试后，我得出的结论是，如果我能弄清楚如何将 div 设置为屏幕宽度的百分比，那么我就可以获得所有 child 容器以适应 parent 一个。
感谢所有评论和回答！
我认为你是在寻找视口的宽度，而不是屏幕的宽度（例如，在 windows 设备上，用户可以将视口设置为他们喜欢的任何尺寸）。
正如@apokryfos 所建议的，您可以使用 1vw 作为视口宽度的 1%（类似地，1vh 作为高度）。这将在任何调整大小时自动更改（例如用户将设备从纵向移动到横向或以其他方式调整 window）。
嗨,
有 css 单位称为视口宽度 (vw) 和视口高度 (vh)。
视口需要第一个元标记命名为：<meta name="viewport" content="width=device-width, initial-scale=1.0">.
1 视口宽度指定用户屏幕的 1%，如果您需要 div 全屏的宽度，只需添加 width: 100vw Css 规则。
相同的 1 视口高度指定 1% 的用户屏幕高度。