從sourceforge嘗試了幾個解決方案,但都沒有找到。如果有人能找到解決方案的鏈接,我很感激
。問題。 我有3個靈活的列元素
不知為何,當主內容溢位時,副頁腳被推倒,超出了螢屏尺寸。 我在哪里錯過了?
這些代碼。 https://play.tailwindcss.com/GHQWK3Fxw1
uj5u.com熱心網友回復:
外部容器應該是max-h-screen,然后設定適當的溢位
<div class="container w-screen bg-green-100" >/span>
<div class="flex flex-col max-h-screen w-full overflow-hidden"/span>>
<!-- Start Header -->
<div class="py-3 bg-gray-700 text-white text-center"/span>> Header</div>
<!--結束標題-->
<!-- 開始主螢屏-->
<div class="flex flex-col mb-auto p-0 overflow-hidden"/span>>
<div class="flex-row h-full w-full overflow-hidden"/span>>
<div class="flex w-72 bg-yellow-100"/span>> Sidebar</div>
<!--內容-->
<div class="flex w-full max-h-full flex-col overflow-auto"/span>>
<div class="py-2 bg-gray-100 text-gray-700 text-center"/span>> 副標題</div>。
<div class="h-full overflow-y-auto p-5"> 什么是Lorem Ipsum?Lorem Ipsum僅僅是t ....</div>的假文本。
<div class="py-5 bg-gray-700 text-center text-white"/span>> 副頁腳</div>
</div>/span>
<!-- End Content -->
<div class="flex w-72 bg-urple-100"> 右欄</div>
</div>/span>
</div>/span>
<!--結束主螢屏-->/span>
</div>
</div>/span>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/331993.html
標籤:
