div css左边固定右边自适应布局
web前端开发之布局:先看效果图,最简单的左右布局。有可能还会被面试问道哈哈哈。一看也没什么特别之处,就是左边固定,右边自适应,就这么简单。
原理:通过设置一个margin-left;或者margin-right就可以搞定。方法有很多,这次就只介绍这种设置margin的。
代码:
<!doctype html> < html > < head > < meta charset = "UTF-8" > < title >Document</ title > < style > body{ margin:0; padding:0; } #wrap { overflow: hidden; *zoom: 1; } #content ,#sidebar { #eee; } #sidebar { float: left; width: 300px; background-color:pink; position:fixed; top:50px; left:0; } #content { margin-left: 310px; height:1000px; background-color:#e456aa; margin-top:50px; } #footer { background-color: #f00; color:#fff; margin-top: 1em; } </ style > </ head > < body > < div style = "width:100%;height:50px;line-height:50px;background-color:#ccc;position:fixed;top:0;left:0;" >这是头部:web前端开发大全</ div > < div id = "wrap" > < div id = "sidebar" style = "height:600px;" >固定宽度区:微信号:jingfeng18</ div > < div id = "content" style = "height:1340px;" >自适应区</ div > </ div > < div id = "footer" >这是尾部,想写什么就写什么,这是一个神奇的地方</ div > </ body > </ html > |
非常简单,如果你还有更好的方法,欢迎前来投稿交流。只为学习更多,技术更上一层楼,早日升职加薪,赢取白富美,走上人生巅峰。学习更多前端技术就在:web前端开发视大全
请记住我们的网站:http://www.qianduanshiping.com 微信号:jingfeng18
微信公众号:jingfeng18
免费学习领取最新的前端学习资源