css上中下布局自适应中间，左右布局自适应左侧display: table

Baaaan 发布于2019-08-30 13:00 / 976人阅读

摘要：在我们经常用到固定头部和底部，自适应中间部分，或者固定左侧，自适应右侧等。在网上看了很多方法，一般都是通过绝对定位完成，具体可以网上去搜，这样可以完成上中下的布局，但是这次基础上再做左右布局浮动会出现问题，具体什么问题我没有深究。

在css我们经常用到固定头部和底部，自适应中间部分，或者固定左侧，自适应右侧等。在网上看了很多方法，一般都是通过绝对定位完成，position: absolute;具体可以网上去搜，这样可以完成上中下的布局，但是这次基础上再做左右布局浮动会出现问题，具体什么问题我没有深究。查阅一些资料后，发现了css的display属性有个table值，可以根据这个做自适应，做参考自己写了一下：




    
    



    
    
        
            
            
        
    
    



这段代码实现了上下自适应和左右自适应，其中 具有display: table-row;     display:table-cell;属性的div不固定高度或宽度进行自适应，其中有几点要注意，
1.请做自适应的时候用div，这样不指定宽度和高度，它会自动填充父元素，这样中间层就是div:parent - 100px -100px;
2.如果不加 这个div进行包裹，left和right会被识别成和header，footer一个table内的同级别元素，header，footer自会占用一列；
3.最有一点，请指定html，body height:100,这样div就可以获取到全屏的高度。

通过使用display我们就可以任意指定上下和左右自适应，代码简单，也不用js.
以上纯属本人观点，如有错误，敬请之处，大家共同进步。

云服务器 GPU云服务器 css自适应 css图片自适应 asp 自适应css 自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115235.html

CSS+DIV自适应布局

摘要：自适应布局两列布局左右两侧，左侧固定宽度右侧自适应占满代码如下左右两侧，左侧固定宽度右侧自适应占满运行结果如下图两栏布局左定宽，右自动三列布局左中右三列，左右固定，中间自适应占满方法一左右浮动，中间，中间在最后代码如下左中右三列， CSS+DIV自适应布局 1.两列布局（左右两侧，左侧固定宽度200px;右侧自适应占满）代码如下：左右...

sanyang 2019-08-02 10:53 评论0 收藏0
CSS+DIV自适应布局

摘要：自适应布局两列布局左右两侧，左侧固定宽度右侧自适应占满代码如下左右两侧，左侧固定宽度右侧自适应占满运行结果如下图两栏布局左定宽，右自动三列布局左中右三列，左右固定，中间自适应占满方法一左右浮动，中间，中间在最后代码如下左中右三列， CSS+DIV自适应布局 1.两列布局（左右两侧，左侧固定宽度200px;右侧自适应占满）代码如下：左右...

Cruise_Chan 2019-08-30 15:54 评论0 收藏0
有关于css的四种布局

摘要：四种布局左右两侧，左侧固定宽度，右侧自适应占满。上中下三行，头部高，底部高，中间自适应占满。上下两部分，底下这个固定高度，如果上面的内容少，那么这个就固定在底部，如果内容多，就把挤着往下走。代码如下布局若有错误请及时通知四种布局（1）、左右两侧，左侧固定宽度200px，右侧自适应占满。（2）、左中右三列，左右个200px固定，中间自适应占满。（3）、上中下三行，头部200p...

khs1994 2019-08-02 10:55 评论0 收藏0
有关于css的四种布局

摘要：四种布局左右两侧，左侧固定宽度，右侧自适应占满。上中下三行，头部高，底部高，中间自适应占满。上下两部分，底下这个固定高度，如果上面的内容少，那么这个就固定在底部，如果内容多，就把挤着往下走。代码如下布局若有错误请及时通知四种布局（1）、左右两侧，左侧固定宽度200px，右侧自适应占满。（2）、左中右三列，左右个200px固定，中间自适应占满。（3）、上中下三行，头部200p...

Steve_Wang_ 2019-08-30 15:54 评论0 收藏0
【CSS】三栏/两栏宽高自适应布局大全

摘要：方案一方案二和方案的有点是兼容性好因为都是比较老的解决方案了缺点是之后需要清除浮动造成的影响定位的话就是绝对定位之后脱离文档流了你要注意用包裹一下方案三是目前移动端主流的方案的语法缺点就是以下不支持。页面布局注意方案多样性、各自原理、各自优缺点、如果不定高呢、兼容性如何三栏自适应布局,左右两侧300px,中间宽度自适应 (1) 给出5种方案方案一: float (左右浮动,中间...

jindong 2019-08-01 18:28 评论0 收藏0