码迷,mamicode.com
首页 > 其他好文 > 详细

一个常见布局问题的讨论

时间:2014-07-10 23:00:34      阅读:393      评论:0      收藏:0      [点我收藏+]

标签:布局   html   css   

需要实现的是一个简单的左右布局页面,左侧是一个固定定位的导航栏,右侧是主体内容,其中右侧下部需要实现一个footer,这个页脚需要在浏览器上下拉伸的时候始终固定在右侧下方,同时,当页面缩放到小于右侧主题内容高度时,footer不会超过主体内容。具体见下图:

bubuko.com,布布扣

上述的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,但是会出现如下问题,
bubuko.com,布布扣
也就是会覆盖上面的主体内容,这要就会使用绝对定位:

                            .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,都会出现直接接在内容部分后面,而不会一直保持在底部,如下:

bubuko.com,布布扣

为此,还是选用以body为绝对定位基准,因为需要的效果是一直保持在页面底部。此时如果将body的高度设置为浏览器当前窗口高度,那么就可以将footer撑到底部。其中涉及到一个浏览器处理页面的问题:

浏览器默认都将html、body元素设置为高度为0,如果不设置高度的话。此时body的正常文档流的子元素的实际高度会撑开body而使得body的高度也是此实际高度。如果设置了body的高度,则会以此高度显示。如果设置了html的高度,则可以以min-height:100%的方式来设置body的高度继承html元素的高度而实现全屏显示。min-height的定义如下:

描述
length 定义元素的最小高度。默认值是 0。
% 定义基于包含它的块级对象的百分比最小高度。
inherit 规定应该从父元素继承 min-height 属性的值。
必须是min-height,不能使用height,因为设置height为100%时就是设置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达到主体内容时,不会跟着浏览器继续往上:

bubuko.com,布布扣

整个分析也是对巧妙使用绝对定位实现特殊效果的一个锻炼,有时候看似简单的东西中间都可以蕴含值得思考的内容。


一个常见布局问题的讨论,布布扣,bubuko.com

一个常见布局问题的讨论

标签:布局   html   css   

原文地址:http://blog.csdn.net/u010487568/article/details/37597995

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!