526互联

css fit-content使用和flex使用高度自适应

发布时间 2023-07-27 12:02:29作者: 零碎沉默
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
     <style type="text/css">
         body{
            padding:0;
            margin:0;
            height:100%; /*定义页面整体高度为100%，重要*/

        }
        .container{
            display:flex; /*父元素的定义为flex布局*/
            width:100%;
            height:100vh; /*这里也要定义，重要*/
            flex-direction: column; /*定义排列方向为竖排*/
        }
         .header{
            height:100px; /*头部固定高度*/
            background: red;
        }
         .footer{
            height:100px; /*尾部固定高度*/
            background: yellow;
        }
         .main{
            background: #ccc;
            flex:1; /*中间分配剩下的所有空间*/
            overflow:auto;
        }
        ul{
            width: -moz-fit-content;
            width: -webkit-fit-content;
            width: fit-content;
            margin: auto;
            list-style: none;
        }
        li{
            float: left;
            margin: 0 10px;
        }
     </style>
    <body>
    <div class="container">
        <div class="header">我是头部</div>
        <div class="main">
            <div class="navbar center">
                <ul>
                    <li><a href="/">首页</a></li>
                    <li><a href="/">关于我们</a></li>
                    <li><a href="/">产品展示</a></li>
                    <li><a href="/">客户支持</a></li>
                    <li><a href="/">联系我们</a></li>
                </ul>
            </div>
        </div>
        <div class="footer">我是尾部</div>
    </div>
    </body>
</html>