我是靠谱客的博主 忐忑灰狼,最近开发中收集的这篇文章主要介绍flex-全屏撑满,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

垂直

css
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
.container{
width: 100%;
background-color: #e4eaf2;
padding-bottom: 30px;
display: flex;
flex-direction: column;
height: 100%;
}
.con_top{
width: 100%;
background-color: white;
height: 60px;
line-height: 60px;
color: #3350a7;
padding-left: 40px;
font-size: 16px;
font-weight: bold;
}
.con_mid{
margin: 40px 40px 0 40px;
background-color: white;
padding: 10px 10px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
height: 100%;
}
复制代码


html
<body>
<div class="container" >
<div class="con_top">
内采订单转采购单
</div>
<div class="con_mid">
</div>
</div></body>复制代码


横向同理


最后

以上就是忐忑灰狼为你收集整理的flex-全屏撑满的全部内容,希望文章能够帮你解决flex-全屏撑满所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(37)

评论列表共有 0 条评论

立即
投稿
返回
顶部