高度100%页面自适应布局详解 - 文章教程

高度100%页面自适应布局详解

发布于 2017-11-16 字数 3867 浏览 3632 评论 0

有时候可能我们会遇到这样的设计,内容需要在浏览器一屏范围内显示,而不会出现滚动滚动条查看内容的情况,如一些富Web应用,让你感觉更像在操作一个程序甚至是窗口界面系统。

高度100%页面自适应布局详解

追述过去,聊天室这类的Web应用就是如此,而往往我们会首先考虑框架元素(Frame)嵌入不同的 HTML 页面实现,特别是早期的类似 Ajax 应用就会用到框架这个古老的元素

但很显然,追求页面标准化和 Web 设计现代化的结构设计师不会首先框架,而我也因为个人原因比较厌恶这个玩意儿,好了讲了这么多废话,无非是想用无框架的做法将页面结构和样式做出来,并且要保证 IE 下完美(近似完美)的表现。

这是我的 HTML 内容,我所做的结构是一个简单的,由顶部、内容、尾部组成的页面:

<div id="wrapper">
	<div id="navBar">
		<div class="stretch">Top content here</div>
	</div>
	<div id="chatContent">
		<div class="inner">Chat content here</div>
	</div>
	<div id="chatInput">Input Area</div>
</div>

这是一个近似于 Omegle 匿名聊天室的结构。

顶部的 navBar 和底部的 chatInput 区域是固定高度的,但主体内容 chatContent 则需要来自适应了(不同的分辨率,不同的浏览器都不同)。

很多人会想到用 JS 的方法来实现,但显然并不是一个好主意。

下面来看怎么用 CSS 来尽力保证浏览器们显示正常,让用户得到一个合理的画面

首页我们按照标准来制作,为了保证一切都在自己应该在的位置上,那么我们就要用到绝对定位

body {
	color:#333;
	font-size:62.5%;
	text-align:center;
	background-color:#e5e3db;
	height:100%;
}
#wrapper {
	width:100%;
	height:100%;
}
#navBar {
	position:absolute;
	left:0;
	right:0;
	top:0;
	height:3.2em;
	background-color:red;
}
#chatContent {
	position:absolute;
	top:5.2em;
	bottom:15em;
	left:2em;
	right:2em;
	background-color:yellow;
}
#chatInput {
	position:absolute;
	left:2em;
	right:2em;
	bottom:1em;
	height:10em;
	background-color:blue;
}

这样完成了第一步,看看FF下的效果,拉伸浏览器看看,我们完成了一个100%高度的布局

可是IE 6可不这么认为你的布局是这样的,对决定定位的元素,它仅仅会适应其内容的高宽,这样就破坏了我们精心设计的布局

那如何解决,我请教了一下 Google 发现国外有一个案例:http://www.pmob.co.uk/temp/fixed-header-footer-left-new.htm

这个案例很好的解决了 IE6 的问题,不需要任何 JS,仅仅添加一些仅让 IE6 读懂的元素

于是根据这个案例我写下

<!–[if ie]>
<style>
html, body {
	overflow:hidden;
}
* html {
	padding:5.2em 0 15em;
}
* html body {
	padding:5.2em 0 15em;
	padding:0;
}
* html #chatInput {
	width:97%;
}
* html #chatContent {
	width:97%;
	height:100%;
	position:relative;
	margin-left:2em;
	margin-right:0;
	left:0;
	top:0;
	right:0;
	bottom:0;
	float:left;
	display:inline;
}
* html .stretch {
	width:100%;
}
* html .inner {
	position:absolute;
	height:100%;
}
</style>
<![endif]–>

可以看到上面 HTML 中两个类 stretchinner 起到了作用,用于撑大父层,为 100% 高度提供了必要元素。

* 选择器对 HTML 元素设置了 padding 以提供 chatContent 一个有效的范围,这样 chatContent 设置为 relative 进行重新定位留在了文档流中,就拥有了高度

至于宽度,完全是利用百分比,所以这个方案中缺陷就这里,不能完全统一 IE6 中容器的宽度,但影响不大,如果再结合JS就能比较完美了

这样基本上就完成了浏览器兼容问题,可以进一步的设计下去,当然在实际案例操作中还会有很多问题,特别是更复杂的布局情况。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论