<html> <head> <style> .container{ background: #aabbcc; width: 1000px; height: 1500px; margin: auto; } .top{ background: #ccc; width: 900px; height: 150px; margin: auto; } .nav{ background: #aaa; width: 900px; height: 100px; margin: auto; } .main{ background: #bbb; width: 900px; height: 1000px; margin: auto; } .footer{ background: #ddd; width: 900px; height: 150px; margin: auto; } </style> </head> <body> <div class="container"> <div class="top"></div> <div class="nav"></div> <div class="main"></div> <div class="footer"></div> </div> </body></html> 用padding呢？我是菜鸟，这是我的想法。margin有时候会重合，你看W3C教程有说明的。
<html> <head> <style> .container{ background: #aabbcc; width: 1000px; height: 1500px; margin:0 auto; padding-top: 100px;padding-bottom: 100px} .top{ background: #ccc; width: 900px; height: 150px; margin:0 auto; } .nav{ background: #aaa; width: 900px; height: 100px; margin: 0 auto; } .main{ background: #bbb; width: 900px; height: 1000px; margin:0 auto; } .footer{ background: #ddd; width: 900px; height: 150px; margin:0 auto; } </style> </head> <body> <div class="container"> <div class="top"></div> <div class="nav"></div> <div class="main"></div> <div class="footer"></div> </div> </body></html>直接这样不行吗.container{ background: #aabbcc; width: 1000px; height: 1500px; margin: auto; padding:100px 0;}
直接这样不行吗.container{ background: #aabbcc; width: 1000px; height: 1500px; margin: auto; padding:100px 0;}
这样不设置height的话就可以吧。
不过我希望设置过container的width和height之后，footer到container底部的距离为100px;
我想知道除了预先计算好尺寸之外还有什么好办法？
添加 overflow:hidden; 有高度跟宽度定义过的 块
你高度减少100px不就可以了吗？
.container{ background: #aabbcc; width: 1000px; height: 1400px; margin: auto; padding:100px 0;}
如果你希望.container总的高度是1500px的话，那么.container的高度可以设置成1300px，padding的top和bottom可以各设置100px，top和bottom就共200px的高度，1300px+200px=1500px，这是你想要的吗？
container没必要设置高度的，让它内部的元素自动填充撑开高度就ok,上边100px的话加上padding-top:100px;就ok，如果内部元素有浮动的话，加上overflow:hidden;
