css实现头部底部中间三栏的布局

时间：2023-04-02 22:02:29 HTML

实现1.flex布局flex灵活布局，更灵活的实现各种形式的布局，目前在移动端和PC端都有大量的应用，没有足以让ie支持10+1.1htmlHeader

Left

居中

右

页脚1.2css.contentdiv{display:flex;}.header,.footer{height:60px;背景：#b2bec3;}.main{/*Firefox*/最小高度：-moz-calc(100vh-150px);/*chromesafari*/最小高度：-webkit-calc(100vh-150px);/*标准*/最小高度：calc(100vh-150px);对齐项目：flex-start;}.main.left,.main.right{width:200px;背景：#dfe6e9；}.main.center{背景：#dfe6e9；边距：020px；flex-grow:1;}.footer{margin-top:30px;}1.2.1flex-grow实现centeradaptiveflexlayout实现中间部分的三栏布局。grow属性定义了项目的放大比例。默认为0，还有剩余不放大（左，中），center为1，为主要部分，除了left和right都在centerpart1.2.2calc和vh实现底部mian部分的footer使用calc动态计算最小高度，这样main的最小高度就是视图高度-（header+footer）vh相对于视口的高度视口被均衡分成100个单位兼容vh1.3我们通过代码可以看出这里主要使用了flexlayout和calc，vh。一般来说，如果不想兼容ie9及以下，flex是更合适的布局，更少的代码就可以实现我们想要的布局。flexcalcvh1.4完整代码https://codepen.io/xiaofute/p...2.float实现浮动布局。问题，比如高度塌陷等。浮动布局的好处是比较简单，兼容性比较好。2.1htmlHeaderLeft右居中页脚2.2css$color-1:#b2bec3;$color-2:#dfe6e9;$width-1:200px;html,body{height:100%;}.content{最小高度:100%;overflow-y:auto;}.header,.footer{text-align:center;高度：60px；行高：60px；背景：$color-1;}.main{clear:both;溢出：隐藏；最小宽度：600px；底部边距：90px；,.right{宽度：$width-1;背景：$color-2；}.left{浮动：左；}.right{浮动：正确；}}.main.center{边距：0($width-1+20px);背景：$color-2；height:100px;}.footer{margin-top:-60px;}2.2.1float实现三列中间部分，left向左浮动，right向右浮动center利用left和rightmargin实现左右右边间隔，左右边距：left/右侧宽度+间隔2.2.2margin负数来实现这里footer的最小高度，使用100%先给html，body:{100%}，这里可以看到content和footer是分开给最小内容高度100%，最小内容就是视口的高度。footer采用margin-top:-(footerheight)，footer不占据内容的高度，负数用来让footer移动到上marin部分。底部边距：90px；bottomheight+spacing2.3完整代码https://codepen.io/xiaofute/p...3其他其实这个布局还有很多其他的实现方式，比如绝对定位布局，表格布局，网格布局，相对比较少，这里就不一一举例了

上一篇：textarea换行处理

下一篇：css文字溢出处理

css实现头部底部中间三栏的布局相关文章