【发布时间】：2021-09-04 05:09:38
【问题描述】：
我是前端 Web 开发的新手，我只是想解决这个问题，因为前端团队（这是一个大学项目）正在努力解决这个问题。
我们正在使用 laravel 进行开发，它有许多预制类，因此您不必编写代码（例如，您可以编写 flex-col、overflow-x-hidden 等）。不要担心，如果你不知道它是什么，我可以拿普通的 HTML 并为它找到等效的 laravel 类。
问题
我需要父 div 的宽度是屏幕宽度的百分比。如果你看下面的图片，你会看到一个绿色和红色的容器。
它们都位于父容器中。例如，我希望父容器占屏幕宽度的 70%，以便它根据屏幕大小进行缩放。但是，当我应用诸如最大宽度之类的东西时，它什么也不做。
在做了一些研究之后，似乎将宽度设置为百分比仅在容器具有父容器时才有效，所以我不确定该怎么做。我已经用谷歌搜索并查看了更多关于堆栈溢出的问题，但所有这些问题都集中在对我有用的最大高度上。
代码
此代码包括图像中除顶部栏之外的所有内容。我们还在右侧添加了通知栏。
<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">$27,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">$30,000.00</span> </span>
<span class="ml-auto">Amount Repaid: <span class = "text-red-500">$2,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>
如果我将父容器（仪表板容器）宽度设置为 24 rems 之类的静态值，那么它可以工作。但是，如果子元素比那个大（它们大很多），那么它们只会延伸到父 div 之外。
我尝试了什么
在这一点上，我尝试了很多不同的东西：
- 根本没有在容器中设置宽度
- 将
absolute添加到所有子容器 - 删除子容器的所有大小变量，一个一个，一次全部等等。
- 去掉所有代码，只保留父div，只添加通知栏，非常简单。也摆脱了所有的尺寸元素。仍然没有任何效果。
经过所有测试，我得出的结论是，如果我能弄清楚如何将 div 设置为屏幕宽度的百分比，那么我可以让所有子容器都适合父容器。
感谢所有 cmets 和答案！
【问题讨论】：
-
width: 70vw;是我们通常获得与屏幕尺寸成比例的东西的方式。那不行吗？允许的 CSS 单元的完整列表是 here 以及浏览器支持 -
是的，它已经排序了，谢谢！！
标签： html css laravel containers