【HTML / CSS】使用position自适应布局

HTML

<div class="wrapper">
    <div class="header"></div>
    <div class="sidebar"></div>
    <div class="content"></div>
</div>

CSS

* {
    margin: 0; 
    padding: 0;
}
body,html {
    height: 100%;
    overflow: hidden;
}
.header,
.sidebar,
.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.header {
    height:100px;
    background: #f08a00;
}
.sidebar {
    top: 100px;
    width: 20%;
    background: #c00000;
}
.content {
    top: 100px;
    left: 20%;
    background: #ccc;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 今天,在网上看到一个题目,关于布局的,左边固定宽,右侧自适应(不少于3种方法),看到问题手痒自己试了一下,想了四种...
    殖民_FE阅读 5,642评论 0 3
  • 译者:旭日云中竹链接:http://www.zcfy.cc/article/1057原文:https://medi...
    IT程序狮阅读 11,363评论 8 200
  • 夜深人静的时候,是放空自己,放纵思念的时候。 不知从什么时候开始有了熬夜的习惯,好像抓住一天最后的几分时光就算是抓...
    小灰煇阅读 1,358评论 0 1
  • 天气 晴 取消了晚上九点半的英语课,其实如果我早几分钟从KTV离开,时间是刚刚好的。说白了今天就是不想上课。 心情...
    西风东来阅读 1,072评论 0 0