1.两栏或者多栏自适应布局
首先要利用块级元素自动填充一行的概念,先用一个div元素占领一行,并通过margin-left给左边留下固定宽度
然后将左栏设定宽度,并用负的margin-left将其顶入到左栏,然后使用position:absolute或者float-left将其提出文档流
然后两栏就形成了。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <script type="text/css"> div.main{ outline:1px solid red; margin-left:200px; } div.aside{ width:200px; margin-left:-200px; background-color:blue; height:400px; position:fixed; } div.content{ background-color:yellow; height:600px; } div.footer{ position:fixed; width:100%; bottom:0; height:100px; background-color:pink; } </script> </head> <body> <div class="main"> <div class="aside">dsadsad</div> <div class="content">dasfa</div> </div> <div class="footer"></div> </body> </html>