css布局高度,宽度自适应的问题,只能使用css,不能用js

如果-yang 发布于 2016/10/13 22:00
阅读 374
收藏 0
加载中
1
如果-yang
如果-yang
谢谢大家的解答,我找到了其他的方法,在这里我贴一下我的答案
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
       #top{
           width: 100%;
           height: 100px;
           background: #009f95;
       }
      #left{
        background: #fff;
        width: 300px;
        position: absolute;
        top: 100px;
        bottom: 0;
     }
    #right{
        background: #fff;
        width: 100px;
        position: absolute;
        top: 100px;
        right: 0;
        bottom: 0;
    }
    #middle{
        background:#ff6633;
        position: absolute;
        left:300px;
        right: 100px;
        top: 100px;
        bottom: 0;
    }
    </style>
</head>
<body>
    <div id="top">top</div>
    <div id="left">
        left
    </div>
    <div id="middle">
        middle
    </div>
    <div id="right">
        right
    </div>
</body>
</html>



1
zabcd117
zabcd117

其实,如果不考虑兼容性的话,有很多种实现方式。不过我觉得有两种比较有代表性。一个是绝对布局,一个是伸缩盒子布局。

http://codepen.io/catalsdevelop/pen/LRAaYk

http://codepen.io/catalsdevelop/pen/amKrJk

两个demo,你可以比较下他们的不同。还有普通table,display:table,浮动甚至是grid,都可以实现。

0
太黑_thj
太黑_thj
自适应尺寸就不应该用实际像素点来限定,而是要用百分比来限定尺寸
0
Asdybing
Asdybing

1.设置body 或HTML 的大小,一般取全屏幕

2.如果各个部分有边框最好设置 box-sizing: border-box;

3.使用calc 来时时计算 height: calc(100% - 120px); -左右要空格

Asdybing
Asdybing
回复 @554330833a : 我用的IE,火狐,谷歌都没问题
554330833a
554330833a
弹性布局好像没什么人用啊?兼容不行吗?
0
红星xx
红星xx

帮你调了一下 ,用的 table 实现,至少兼容到ie6 。你看一下。

http://runjs.cn/detail/6na4bekz

开源中国首席老王
开源中国首席老王
的确,table是最方便的。其实table性能方面也差不了多少,就是逼格低了些
返回顶部
顶部