html5、CSS3三段式布局

最新推荐文章于 2024-07-27 17:28:42 发布

sqlite_me

最新推荐文章于 2024-07-27 17:28:42 发布

阅读量524

点赞数

文章标签： html5 css3 html

本文链接：https://blog.csdn.net/sqlite_me/article/details/124884140

版权

html三段式布局比较常见，这里采用flex实现

<html>
<head>
   <style>
   html,body{
       height:100%,
   }
   .contaner{
       height:100%;
       display:flex;
       flex-direction:column;
       text-align:center;
   }
   .head{
   }
   .main{
       flex-grow:1;
       overflow:overlay;
   }
   .foot{
   }
   .content{
       height:1200px;
       width:300px;
       background-color:red;
   }
   </style>
</head>
<body>
   <div class="contaner">
       <div class="head">
       head
       </div>
       <div class="main">
           mainStart
           <div class="content">
           </div>
           mainEnd
       </div>
       <div class="foot">
       foot
       </div>
   </div>
</body>
</html>