即使内容试图溢出，如何将 div 限制为屏幕大小

问题描述 投票：0回答：1

我正在努力将 div 限制在屏幕底部。我的身体内部有这样的结构。

<body class="flex">
    <div class="h-screen w-48">navbar sticking to the left covering entire height with a fixed width.</div>
    <div class="h-screen flex-1 flex flex-col">
        <div class="w-full h-20">header containing heading of the page</div>
        <div class="w-full flex-1"> //covering remaining height(3rd div)
            <ul>
                <li>Item1</li>
                <li>Item2</li>
                <li>Item3</li>
                <li>Item4</li>
                ...many more items
            </ul>
        </div>
    </div>
</body>

我希望第三个 div 覆盖笔记本电脑和台式机屏幕的剩余高度，如果有想要离开屏幕的列表，则第三个 div 上会出现一个滚动条。

如果我尝试给出一个最大高度，那么它对于某些屏幕来说看起来很好，但对于其他屏幕来说却很难看（假设我给出了 680px 的最大高度，那么它会覆盖某些尺寸的屏幕，而对于其他尺寸，它会超出屏幕下方或出现短于屏幕底部）。我希望 3 个 div 的结构在页面上保持静态，无论屏幕大小如何，如果第 3 个 div 中的内容想要溢出，则其上会出现一个滚动条。

html css tailwind-css overflow styling
1个回答
0
投票

我想你想制作一个导航栏。在 html 文件中添加 bootstrap css 时使用此代码。enter image description here

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.