面试被问到上下式三栏布局，你能写出几种方法？

最新推荐文章于 2022-04-05 22:48:02 发布

又菜又爱玩的程序猿

最新推荐文章于 2022-04-05 22:48:02 发布

阅读量184

点赞数

分类专栏：前端需求实现文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_57585624/article/details/120706100

版权

前端需求实现专栏收录该内容

3 篇文章 0 订阅

订阅专栏

三栏式布局，上下固定，中间自适应

方法一：定位布局法

<style>
     div{
         position: absolute;
         width: 100%;
     }
     .top{
         top: 0;
         background-color: red;
         height: 200px;
     }
     .center{
         top: 200px;
         bottom: 200px;
         background-color: blue;
     }
     .bottom{
         bottom: 0;
         background-color: green;
         height: 200px;
     }
 </style>
</head>
<body style="height:800px;">
   <div class="top">top height 200px</div>
   <div class="center">center height 400px</div>
   <div class="bottom">bottom height 200px</div>
</body>

方法二：flex布局法

<style>
	 body{
		 display:flex;
		 flex-direction:column;
	 }
     .top{
         background-color: red;
         height: 200px;
     }
     .center{
     	 flex:1;
         background-color: blue;
     }
     .bottom{
     	 height:200px;
         background-color: green;
     }
 </style>
</head>
<body style="height:800px;">
   <div class="top">top height 200px</div>
   <div class="center">center height 400px</div>
   <div class="bottom">bottom height 200px</div>
</body>

方法三：table布局法

<style>
     body{
         display:table;
     }
     div{
     	 display: table-row;
         vertical-align: middle;
         width:100%;
     }
     .top{
         background-color: red;
         height: 200px;
     }
     .center{
     	 over-flow:auto;
         background-color: blue;
     }
     .bottom{
         background-color: green;
         height: 200px;
     }
 </style>
</head>
<body style="height:800px;">
   <div class="top">top height 200px</div>
   <div class="center">center height 400px</div>
   <div class="bottom">bottom height 200px</div>
</body>

方法四：grid布局法

<style>
	 body{
		 display:grid;
		 grid-template-rows: 200px auto 200px;
	 }
     .top{
         background-color: red;
     }
     .center{
         background-color: blue;
     }
     .bottom{
         background-color: green;
     }
 </style>
</head>
<body style="height:800px;">
   <div class="top">top height 200px</div>
   <div class="center">center height 400px</div>
   <div class="bottom">bottom height 200px</div>
</body>

这里总结了四种方法，屏幕前的你还有其他方法吗？欢迎留言补充！！！

又菜又爱玩的程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
面试被问到上下式三栏布局，你能写出几种方法？

三栏式布局，上下固定，中间自适应方法一：定位布局法<style> div{ position: absolute; width: 100%; } .top{ top: 0; background-color: red; height: 200px; } .center{ top: 200px; bottom: 20.
复制链接

扫一扫