一个常见布局有关问题的讨论
需要实现的是一个简单的左右布局页面，左侧是一个固定定位的导航栏，右侧是主体内容，其中右侧下部需要实现一个footer，这个页脚需要在浏览器上下拉伸的时候始终固定在右侧下方，同时，当页面缩放到小于右侧主题内容高度时，footer不会超过主体内容。具体见下图：
上述的html结构如下：
<body> <div class="nav">左侧固定导航栏</div> <div class="content"> <div class="text">我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br>我是内容<br></div> </div> <div class="footer_con"><span class="footer">我是footer</span></div> </body>
这在实现上，也没有其他特别的难度：
首先，左侧导航栏使用fixed定位，设置top 、 bottom 、 left都为0。
.nav{
width: 120px;
height: 100%;
position: fixed;
left: 0px;
bottom: 0px;
background-color: green;
}右侧内容部分是实际内容大小撑开，下部的footer测试需要根据浏览器的上下拉伸固定在页面底端，这首先会想到用fixed，但是会出现如下问题，也就是会覆盖上面的主体内容，这要就会使用绝对定位：
.footer{
position: absolute;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 100;
background-color: red;
margin-left: 120px;
}
这要设置后，会发现另外一个问题，如果设置以body为据对定位基准，设置body的position为relative，或者以footer类的父元素定位position为relative，都会出现直接接在内容部分后面，而不会一直保持在底部，如下：
为此，还是选用以body为绝对定位基准，因为需要的效果是一直保持在页面底部。此时如果将body的高度设置为浏览器当前窗口高度，那么就可以将footer撑到底部。其中涉及到一个浏览器处理页面的问题：
浏览器默认都将html、body元素设置为高度为0，如果不设置高度的话。此时body的正常文档流的子元素的实际高度会撑开body而使得body的高度也是此实际高度。如果设置了body的高度，则会以此高度显示。如果设置了html的高度，则可以以min-height：100%的方式来设置body的高度继承html元素的高度而实现全屏显示。min-height的定义如下：
| 值 | 描述 |
|---|---|
| length | 定义元素的最小高度。默认值是 0。 |
| % | 定义基于包含它的块级对象的百分比最小高度。 |
| inherit | 规定应该从父元素继承 min-height 属性的值。 |
此处，就是要实现内容元素全屏显示，而footer元素脱离了文档流，同时以body为绝对定位基准，因此如果body为整个窗口大小，那么footer的bottom:0就会固定在页面的底部。同时，由于页面最低高度为100%，设置footer的直系父元素footer-con的高度和footer的高度相同，那么当减小浏览器窗口的高度时，footer-con和内容部分是body的正常文档流，小于此高度时，也就是body的100%高度，浏览器就会出现滚动条，而此时body的底部一直会是footer-con元素的底部，那么footer设置的bottom为0就会停留在foote-con元素的底部，从而就不会超出而往上覆盖主体内容部分。这就是这里使用绝对定位实现的效果。最终的效果如下，当浏览器往上缩小高度使得footer达到主体内容时，不会跟着浏览器继续往上：
整个分析也是对巧妙使用绝对定位实现特殊效果的一个锻炼，有时候看似简单的东西中间都可以蕴含值得思考的内容。