tailwindcss:flex布局解决高度不固定的需求

最新推荐文章于 2024-05-10 13:46:11 发布

Whitess007

最新推荐文章于 2024-05-10 13:46:11 发布

阅读量1.7k

点赞数

分类专栏： Css 文章标签：前端

本文链接：https://blog.csdn.net/rencaishigepi/article/details/125640853

版权

Css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

体验了一把tailwindcss，写在页面上的确实简化了大量css的编写，简洁美观一些。

效果：
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/tailwindcss/2.2.19/tailwind.css" rel="stylesheet">
    <style>
        html,
        body {
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        p {
            padding: 0;
            margin: 0;
        }
    </style>
</head>

<body>
    <div class='w-full h-full flex flex-col overflow-hidden'>
        <div class="w-full min-h-30	bg-red-500 text-center">header</div>
        <div class="w-full flex-1 flex flex-row bg-white-500 px-1 overflow-hidden">
            <div class="w-7/12 min-h-30	bg-green-300 text-center flex flex-col flex-1 mr-1 overflow-hidden">
                <div class="min-h-30 bg-yellow-100">tabbar</div>
                <div class="flex-1 bg-yellow-200 my-1 overflow-y-scroll">
                    <p class="h-32">11111111</p>
                    <p class="h-32">11111111</p>
                    <p class="h-32">11111111</p>
                    <p class="h-32">11111111</p>
                    <p class="h-32">11111111</p>
                    <p class="h-32">11111111</p>
                    <p class="h-32">11111111</p>
                    <p class="h-32">11111111</p>
                    <p class="h-32">11111111</p>
                    <p class="h-32">11111111</p>
                </div>
                <div class="min-h-30 bg-yellow-300">paganition</div>
            </div>
            <div class="w-2/12 min-h-30	bg-green-500 text-center">right center</div>
        </div>
        <div class="w-full min-h-30	bg-red-500 text-center">footer</div>
    </div>
    
</body>

</html>