flex悬挂式布局处理固定定位的问题

以你之姓@ 2021-12-05 04:11 410阅读 0赞

一直以来在webapp的时候经常遇到上下固定定位的问题,然后有一部分内容被遮挡住了,这就很尴尬,每次都要计算padding当前fixed容器的高度,来保证兄弟元素不被遮挡的问题.这个布局主要使用了flex悬挂布局,一些小的技巧以下是源码部分.

我是头部

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style type="text/css">
            *{
           
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            body{
           
                max-width: 750px;
                margin: 0 auto;
            }
            *::-webkit-scrollbar {
           
                display: none;
            }
            #content{
           
                height: 100vh;
                display: flex;
                flex-direction: column;
                
            }
            .header{
           
                background: red;
                height: 40px;
            }
            .wrap_body{
           
                background: rgba(0, 0, 0, 0.4);
                flex: 1;
                overflow-y: scroll;
            
            }
           
            .bottom{
           
                background: grey;
                height: 40px;
            }
            .center{
           
                height: 1200px;
                border: 10px;
                margin: 10px;
                border: 1px solid #ccc;
           
            }
            
        </style>
    </head>
    <body>
        <div id="content">
            <div class="header">444</div>
            <div class="wrap_body">     
                <div class="body">
                    <div class="center">
                          
                    </div>
                    <div class="center">
                          
                    </div>
                
                </div>
            </div>
            <div class="bottom">
                我是底部
            </div>
        </div>
    </body>
    </html>

我是底部

转载于:https://www.cnblogs.com/520lqlst/p/11173379.html