HTML页面布局问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML页面布局问题相关的知识，希望对你有一定的参考价值。

1、把页面分为header、container、footer上中下三部分，header和footer固定在浏览器的上面和下面，header和footer的高度以像素为单位。
2、container部分，分为sidebarmenu、mainContent左右两部分，sidebarmenu的宽度以像素为单位。
3、当中间部分内容过多时，mainContent出现滚动条。（注：滚动条是出现在mainContent里，而不是container，滚动条移动时，sidebarmenu里的内容是不动的）
4、如果可能，html代码在IE、Firefox、Chrome浏览器里都能正常显示。

如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div+CSS布局</title>
<style>
body font-family:Verdana; font-size:14px; margin:0;
#container margin:0 auto; width:900px;
#header height:100px; background:#6cf; margin-bottom:5px;
#mainContent height:500px; margin-bottom:5px;
#sidebar float:left; width:200px; height:500px; background:#9ff;
#content float:right; width:695px; height:500px; background:#cff;/*因为是固定宽度，采用左右浮动方法可有效避免ie 3像素bug*/
#footer height:60px; background:#6cf;
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="mainContent">
<div id="sidebar">sidebar</div>
<div id="content"></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>追问

1、mainContent、sidebar、content 的高度不能用px定死，需要根据浏览器的大小、电脑的分辨率自适应。
2、footer始终固定在浏览器的最底部。
3、关于滚动条，不是出现在整个浏览器的右边，而是出现在content的右边（浅蓝色的右边）。

 参考技术A 简单 用框架 或者 overflow:auto 前者是固定好框架宽度 相当于4个不同页面 后者是在样式里面定义 不能超过特定的宽度或高度 否则就会有滚动条追问

方便的话，请直接给出页面代码吧。我尝试了很多，但还是有问题

追答

先看看别人的 不行的话晚上再说 现在有点忙

 参考技术B <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div+CSS布局</title>
<style>
body font-family:Verdana; font-size:14px; margin:0;

#nav
background-color: #85d989;
width: 100%;
height: 50px;

#mid
background-color: #cc85d9;
width: 100%;
position: absolute;
top: 50px; bottom: 50px;
left: 0px;

#menu background-color:#ffff99;height:100%;width:30%;float:left;
#content background-color:#EEEEEE;height:100%;width:70%;float:left;overflow: auto;

#footer
background-color: #aa85d9;
width: 100%;
height: 50px;

position: absolute;
bottom: 0px;
left: 0px;

</style>
</head>
<body>

<div id="main">
<div id="nav">nav</div>
<div id="mid">
<div id="menu">
<h2>Menu</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ul>
</div>

<div id="content">
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
content<br>
</div>
</div>
<div id="footer">footer</div>

</div>
</body>
</html> 参考技术C css :
.mainContent
overflow-y:scroll ;
height:500px;
追问

mainContent的高不能用px，height:100%;

 参考技术D 怎么有点像试题？追问

不是试题，是我自己在做，但是滚动条那里的显示老是出问题。

追答

mainContent css里增加 overflow:scroll 属性不就行了吗;

追问

不行，我需要用的是overflow:auto，但在IE里面滚动条不显示。

追答

你确定mainContent里内容有很多吗

追问

有的页面多，有的页面少，但内容多的时候，滚动条必须按上面的要求出现。

有的页面多，有的页面少，但内容多的时候，滚动条必须按上面的要求出现。

追答

因为你写的样式是 overflow:auto
当内容超出div的显示范围的时候，才会出现滚动条
这也就是你定 auto 的原因

[ HTML5 ] WEB 常用页面布局梳理和分析

页面布局实现的方法有许多种，但是我个人习惯是会只用一种自己比较习惯的方法，只要不是出现了兼容性问题一般也不会去使用其他的方法，但是也是要知道有哪一些方法可以实现，确实忘记了我就使用搜索快速解决问题。下面是我梳理了一下各种布局的方法。


三栏布局：左右定宽中间自适应

使用 float 属性

使用 float 属性就是将左右的 DIV 浮动，中间的 DIV 不需要做其他处理，他会直接放在两个 DIV 之间。

article{ width: 100%; height: 200px; background-color: antiquewhite;}.left{ float: left; width: 200px; height: 100%; background-color: aqua;}.right{ float: right; width: 200px; height: 100%; background-color: aqua;}.center{ height: 100%; background-color: blueviolet;}
<article> <section class="left">left</section> <section class="right">right</section> <section class="center">center</section></article>

如图：

这个方法以前会用到，但是现在基本上不会使用，个人不太喜欢 float 属性。使用 float 就会使元素脱离文档流，到了后面如果有处理的不好的地方就可能会有其他的问题，同时还有子元素也是脱离了文档流，这种感觉并不是特别好。但他的优点是兼容性还可以。


还有一点是，这个是在定高的情况下，如果内容溢出或者不定高的话，float 也会有内容偏移的情况也要做一些处理。


使用绝对定位方法

使用绝对定位的方就是将三个容器都定为绝对定位，左右侧 DIV 绝对定位且定宽，中间距离等于左侧宽度和右侧宽度 。

.wrapper-1{ position: relative; width: 100%; height: 200px; background-color: antiquewhite;}.wrapper-1 .left-1{ position: absolute; left: 0; top: 0; width: 200px; height: 100%; background-color: aqua;}.wrapper-1 .right-1{ position: absolute; right: 0; top: 0; width: 200px; height: 100%; background-color: aqua;}.wrapper-1 .center-1{ position: absolute; left: 200px; right: 200px; height: 100%; background-color: blueviolet;}
<article class="wrapper-1"> <section class="left-1">left</section> <section class="center-1">center</section> <section class="right-1">right</section></article>

如图：

[ HTML5 ] WEB 常用页面布局梳理和分析

绝对定位的方法好处依然是兼容性可以，但是脱离文档流是一个问题。绝对定位的方法这个布局下面的子元素全部都是脱离文档流的，这个方法用来做基本布局其实不太合理。就算是浮动清除得好，也不建议用这样的方法。


使用网格布局

这个可能有点兼容性问题，但也是可以慢慢尝试去使用，现在在项目上一般情况下也没有使用到这个方法。但这个方法用起来确实是很方便，几行代码就可以搞定。

.wrapper-3{ position: relative; display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 200px auto 200px; background-color: antiquewhite; margin-top: 20px;}.wrapper-3 .left-3{ height: 100%; background-color: aqua;}.wrapper-3 .right-3{ height: 100%; background-color: aqua;}.wrapper-3 .center-3{ height: 100%; background-color: blueviolet;}
<article class="wrapper-3"> <section class="left-3"> left </section> <section class="center-3"> center </section> <section class="right-3"> right </section></article>

如图：

[ HTML5 ] WEB 常用页面布局梳理和分析


使用 flex 布局（常用）

flex 布局是我现在基本都在使用的方法，以前还可能有些设备不支持，但是现在的设备跑 flex 基本上是没有问题的。

他的方法是将 DIV 都设置为 flex ，需要定宽的设置宽度，不需要的将 DIV 设置一个 flex :1 。

.wrapper-2{ position: relative; display: flex; width: 100%; height: 200px; background-color: antiquewhite;}.wrapper-2 .left-2{ width: 200px; height: 100%; background-color: aqua;}.wrapper-2 .right-2{ width: 200px; height: 100%; background-color: aqua;}.wrapper-2 .center-2{ flex: 1; height: 100%; background-color: blueviolet;}
<article class="wrapper-2"> <section class="flex left-2"> left </section> <section class="flex center-2"> center </section> <section class="flex right-2"> right </section></article>

如图：

[ HTML5 ] WEB 常用页面布局梳理和分析

现在的移动端都非常适合用这个方法，前一两年还有一些手机不兼容，但是现在基本上是不会了。我记得之前做了一个 h5 就是使用了 flex。神奇的是所有的手机都没有问题，唯独负责这个 h5 的产品经理的 iphone 6 显示是有兼容问题的，我也是醉了，但现在基本上就忽略了很旧的设备。


表格布局 

他的优点是兼容性是这几个布局方法里面最好的，但是写法看上去很古老，这个方法已经过时了，可以忽略。


三栏布局：上下定宽中间自适应

上下定宽中间自适应这种一般使用在移动端是非常多的尤其是顶部固定内容自适应或者是内容自适应底部固定，布局方法和上面的很相似，但也有不用的地方。


使用 calc函数 布局（常用）

这个方法相比简单，只要将顶部和底部的高度减去就可以了，兼容性也比较好。

html,body { width: 100%; height: 100%;}.wrapper { position: relative; width: 100%; height: 100%; background-color: antiquewhite;}.wrapper header { width: 100%; height: 200px; background-color: aqua;}.wrapper section { height: calc(100% - 400px); background-color: brown;}.wrapper footer { height: 200px; background-color: blueviolet;}
<article class="wrapper"> <header>顶部</header> <section> <div class="center"> 中部 </div> </section> <footer class="footer">底部</footer></article>

如图：

[ HTML5 ] WEB 常用页面布局梳理和分析


使用 flex 布局（常用）

使用 flex布局的话和横屏的很像，只是在高度上建议是使用 min-height，避免有些小机型展示会有问题，但现在基本上可以忽略了。

html,body { width: 100%; height: 100%;}.wrapper { position: relative; width: 100%; height: 100%; display: flex; flex-direction: column; background-color: antiquewhite;}.wrapper header { width: 100%; min-height: 100px; background-color: aqua;}.wrapper section { width: 100%; min-height: 100px; flex: 1; background-color: rgb(70, 67, 67);}
.wrapper footer { width: 100%; min-height: 100px; background-color: blueviolet;}
<article class="wrapper"> <header>顶部</header> <section>中部</section> <footer>底部</footer></article>

如图：

[ HTML5 ] WEB 常用页面布局梳理和分析


垂直居中布局

使用 position  实现居中（定高）

我个人在使用 flex 布局之前，大多数的情况使用了这样的方法。

.wrapper { position: relative; width: 100%; height: 100%; background-color: antiquewhite;}.wrapper section{ position:absolute; width: 100px; height: 100px; left: 0; right: 0; top: 0; bottom: 0; margin: auto; background-color: brown;}
<article class="wrapper"> <section></section></article>

如图：

[ HTML5 ] WEB 常用页面布局梳理和分析


使用 transform 实现居中 （不定高）

不定高度在一段时间的前端面试中，那个是逢面必问的题目。但是现在问这个题目的也就不多了。

.wrapper { position: relative; width: 100%; height: 100%; background-color: antiquewhite;}.wrapper section{ position:absolute; top:50%; left:50%; width: 100px; height: 100px; transform:translate(-50%,-50%); background-color: brown;}
<article class="wrapper"> <section></section></article>


如图：


使用 flex 居中（推荐）

使用 flex 中在现在来看是最方便的，仅仅几行代码就可以实现而且不需要考虑盒子是不是不定高的情况。

.wrapper { position: relative; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; background-color: antiquewhite;}.wrapper section{ width: 100px; height: 100px; background-color: brown;}
<article class="wrapper"> <section></section></article>


只能说这个方法简直完美。

这个一个居中的段落中，中间有一些方法我去掉了。就比如不定高的垂直居中还有其他的方法，但是我觉得没有必要像字典一样写出来，根本没有必要，使用一个最合适的方法，其他的如有需要就使用搜索快速解决。


以上就是对页面布局进行的一个梳理。


以上是关于HTML页面布局问题的主要内容，如果未能解决你的问题，请参考以下文章

html布局问题

如何利用EasyUI框架控制页面布局

Layui后台布局页面-静态单页面

Layui后台布局页面-静态单页面

页面布局

React页面布局技巧