一个常见布局问题的讨论
Posted brucemengbm
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个常见布局问题的讨论相关的知识，希望对你有一定的参考价值。
须要实现的是一个简单的左右布局页面，左側是一个固定定位的导航栏，右側是主体内容。当中右側下部须要实现一个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达到主体内容时。不会跟着浏览器继续往上：
整个分析也是对巧妙使用绝对定位实现特殊效果的一个锻炼，有时候看似简单的东西中间都能够蕴含值得思考的内容。
以上是关于一个常见布局问题的讨论的主要内容，如果未能解决你的问题，请参考以下文章