Skip to content

Instantly share code, notes, and snippets.

@jikeytang

jikeytang/[ CSS ] - 20140612-题目1

Last active August 29, 2015 14:02
Show Gist options
  • Save jikeytang/18c5cfdc9b06cabc6999 to your computer and use it in GitHub Desktop.
Save jikeytang/18c5cfdc9b06cabc6999 to your computer and use it in GitHub Desktop.
Download ZIP
[ CSS ] - 20140612-题目1
Raw
[ CSS ] - 20140612-题目1
用html,css实现以下三种情况的布局：
1. 2列布局：左固定，右自适应。
2. 3列布局：左右固定，中自适应。
3. 2行上下布局，下是左右布局：
a. 头部高固定且位置固定，
b. 下左宽度固定，下右宽度自适应且实现iframe高度自适应，
c. 全屏无横向滚动条，下左，下右内容超出高度时出现纵向滚动条 (可以不考虑ie6，用纯css实现)。
PS:
1. 回复时注意加上下面这句话，才会有语法高亮或格式缩进。
```html
// you code
```
2. 也可以粘贴jsfiddle地址，比如：
http://jsfiddle.net/jikeytang/Rmt8M/
评论支持markdown语法。
[http://jsfiddle.net/jikeytang/Rmt8M/](http://jsfiddle.net/jikeytang/Rmt8M/)
@DestroyGod
Copy link 

1.
<style type="text/css">
    *{margin: 0; padding: 0;}
    .content{width: 100%;}
    .div1{width: 500px; height: 100px; background: blue; float: left;}
    .div2{height: 100px; background: red;}
</style>
<body>  
    <div class="content">
        <div class="div1"></div>
        <div class="div2"></div>
    </div>
</body> 

2.
<style type="text/css">
    *{margin: 0; padding: 0;}
    .content{width: 100%;position: relative;}
    .div1{width: 500px; height: 100px; background: blue;  position: absolute; top: 0; left: 0;}
    .div2{height: 100px; background: red; margin: 0 500px;}
    .div3{width: 500px; height: 100px; background: yellow; position: absolute; top: 0; right: 0;}
</style>
    <div class="content">
        <div class="div1"></div>
        <div class="div2"></div>
        <div class="div3"></div>
    </div>

3.
<style type="text/css">
    *{margin: 0; padding: 0;}
    .content{width: 100%; background: black; position: relative;}
    .div1{width: 100%; height: 200px; background: blue;  position: fixed; top: 0; left: 0;}
    .div2{margin-top: 200px;}
    .div3{width: 500px; height: 1000px; float: left; background: red;  overflow-y: auto;}
    .div4{height: 1000px; background: yellow; }
    .iframe1{ height: 100%; background: #ccc;}
</style> 
    <div class="content">
        <div class="div1"></div>
        <div class="div2">
            <div class="div3">
                <div style="width: 100%; height: 2000px;"></div>
            </div>
            <div class="div4">
                <iframe class="iframe1"></iframe>
            </div>
        </div>      
    </div>

@uicici
Copy link

uicici commented Jun 12, 2014

1楼的第一题有误，下面是我的方案，不过也不是很好，我只会用百分比。换成固定数字就不行。
1.

<style type="text/css"> *{margin: 0; padding: 0;} .content{width: 100%;} .div1{width: 20%; height:100%; background: blue; float: left; position:fixed} .div2{ width:80%; float:right; background: red; } .clearfix { *zoom: 1;} .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } </style> 
    <div class="div2 clearfix">第三方士大夫</div>
</div>

@chenfengyanyu
Copy link 

1.
<style>
    .left{
      width:200px;
      height:400px;
      background:#ccc;
      float:left;
    }
    .right{
      width:100%;
      height:400px;
      background:yellow;
      margin-left:200px;
      position:absolute;
    }
 </style>
<div class="left"></div>
<div class="right"></div>

http://jsbin.com/#/harolihe/1/edit

2.
<style>
    .left{
      width:200px;
      height:400px;
      background:#ccc;
      float:left;
    }
    .center{
      height:400px;
      border:1px solid red;
      margin:0 200px;
    }
    .right{
      width:200px;
      height:400px;
      background:green;
      float:right;
    }
  </style>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>

http://jsbin.com/harolihe/7/edit

@hjzheng
Copy link

hjzheng commented Jun 12, 2014

@chenfengyanyu 你的答案才应该是第一题的最佳答案

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment