面试题目——自适应满屏三栏布局

面试中可能会出现这样的的题目：蓝色高度固定，红色宽度固定高度自适应铺满屏幕，黄色自适应。

 

方法一：绝对定位，浮动，左边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应布局</title>
    <style>
        *{padding:0;margin:0;}
        body,html{height:100%;}
        /*蓝色绝对定位，内容区域内边距，左侧红块左浮动，右侧黄块设置左边距；注意使用box-sizing: border-box；改变盒模型*/
        .header{position: absolute;top:0;left:0;width: 100%;height:100px;background: blue}
        .content{position: relative;padding:110px 0 0;height:100%;box-sizing: border-box;}
        .left{width: 200px;height: 100%;float: left;background:red;}
        .right{height: 100%;background: yellow;margin-left:210px;}
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

 方法二：绝对定位的非绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应布局</title>
    <style>
        *{padding:0;margin:0;}
        body,html{height:100%;}　　　　
　　　　/*内容区域绝对定位设置top,left,right,bottom让其充满屏幕*/
　　　　.header{height:100px;background: blue}
       .content{position: absolute;margin-top: 110px;top:0;left:0;right:0;bottom:0;}
       .left{width: 200px;height: 100%;float: left;background:red;}
       .right{height: 100%;background: yellow;margin-left:210px;}
</style>
</head>
<body>
    <div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

 

 方法三：方法二的改造，固定定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应布局</title>
    <style>
        *{padding:0;margin:0;}
        body,html{height:100%;}　　　　
　　　　/*方法二改造，蓝色块固定定位*/
　　　　.header{height:100px;background: blue;position: fixed;top:0;left:0;width: 100%;}
       .content{position: absolute;margin-top: 110px;top:0;left:0;right:0;bottom:0;}
       .left{width: 200px;height: 100%;float: left;background:red;}
       .right{height: 100%;background: yellow;margin-left:210px;}
</style>
</head>
<body>
    <div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

 

 方法四：方法一的改造

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应布局</title>
    <style>
        *{padding:0;margin:0;}
        body,html{height:100%;}
        /*蓝色块固定定位*/
        .header{position: fixed;top:0;left:0;width: 100%;height:100px;background: blue}
        .content{position: relative;padding:110px 0 0;height:100%;box-sizing: border-box;}
        .left{width: 200px;height: 100%;float: left;background:red;}
        .right{height: 100%;background: yellow;margin-left:210px;}
    </style>
</head>
<body>
    <div class="header"></div>
    <div class="content">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

 

 

总结：

知识有限，目前只想出了这几种，而且第三和第四，说到底也是雷同的，并没什么新颖的点。还有什么其他的方法，还忘提醒下，我这边会再补充的....

 

posted @ 2016-08-01 15:25  羯瑞  阅读(947)  评论(0)  编辑  收藏  举报