div绝对居中、宽高自适应、多栏宽度自适应打赏

最近工作上有需求写一些页面,很久没动手了,发现很多排版、样式等技巧都忘得差不多了,几番折腾,还算解决了基本的布局问题。下面分享一下常见的几种div布局问题。

1、div绝对居中。
效果如下:
divposition1
就是固定大小的div在浏览器中垂直、水平都居中,适合用到浮动弹出框、页面居中的登陆框等你想得到的地方。以前我也曾使用window.onload和window.onresize来控制高度自适应,宽度好说,兼容IE和其他主流浏览器的,直接文本居中,内部“margin:0 auto;”。

废话不说,下面是现在的纯css解决方法。
以宽高为400px*300px的div居中为例,body内只有div,所以简写css如下:

div { width:400px; height:300px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; background:#f90;}

完整html源码如下:

<!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=utf-8" />
<title>test</title>
<style>
div { width:400px; height:300px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-150px; background:#f90;}
</style>
</head>
<body>
<div></div>
</body>
</html>

这样就完美实现了绝对居中,另外,如果设计中最外边框添加了border,div设置了padding等,一定要注意margin值要排除border宽或者padding值。

2、宽高自适应。
效果如下:
divposition2
很多情况下,我们希望页面的宽高可以自适应,宽度自适应很简单,当然,这里所说的自适应不是自适应内容,而是自适应浏览器,在同一行级只有一个层的情况下,宽度自适应直接使用width:100%;就可以了,但是高度自适应就有些不遂人意了,很多时候设置height:100%;完全不起效,其实,这时完全是因为div所在位置的上级元素没有指定高度。
同样以一个div为例,css如下:

html,body { height:100%; width:100%; margin:0; padding:0;}
div { height:100%; width:100%; background:#f90;}

完整html源码如下:
<!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=utf-8" />
<title>test</title>
<style>
html,body { height:100%; width:100%; margin:0; padding:0;}
div { height:100%; width:100%; background:#f90;}
</style>
</head>
<body>
<div></div>
</body>
</html>

这里有一个细节问题吗,为什么设置body的height为100%的同时还要设置html呢?其实是为了解决firefox的兼容性,firefox默认body占用的不是100%;,这里有一个设计思想就是,如果某个层要用到100%或者其他值的百分比,上一级必须指定高度,当然,这同样应用到div下的div,具体该怎么写,大家摸索吧。

3、多栏宽度自适应。
效果如下:
divposition3
前面第二部分已经将过完全的自适应宽高,但其中的宽度自适应只是在一个div独占一行的情况下,如果出现多个div,如常见的主题部分左右、左中右布局的网站页面,两边固定宽,中间自适应,改怎么写呢?其实只要在中间部分的div下再套一层div即可,示例css如下:

html,body { height:100px; width:100%; margin:0; padding:0;}
.left { height:100px; width:100px; background:#CC3; float:left;}
.middle { margin:0 50px 0 100px;}
.middle .content { height:100px; width:100%; background:#F60; float:left;}
.right { height:100px; width:50px; background:#09F; float:left;}

完整html源码如下:

<!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=utf-8" />
<title>test</title>
<style>
html,body { height:100px; width:100%; margin:0; padding:0;}
.left { height:100px; width:100px; background:#CC3; float:left;}
.middle { margin:0 50px 0 100px;}
.middle .content { height:100px; width:100%; background:#F60; float:left;}
.right { height:100px; width:50px; background:#09F; float:left;}
</style>
</head>
<body>
<div class="left"></div>
<div class="middle">
<div class="content"></div>
</div>
<div class="right"></div>
</body>
</html>
当然,两栏以及更多栏目都适应此方法,具体就不再举例了。

div绝对居中、宽高自适应、多栏宽度自适应
文章《div绝对居中、宽高自适应、多栏宽度自适应》二维码
  • 微信打赏
  • 支付宝打赏

已有24条评论

  1. 醉琉璃

    不错,学习了

    2021-09-15 11:02 回复
  2. Adoncn

    简洁实用,好文章!

    2021-09-12 18:19 回复
  3. 高原雄鹰影视

    嵌入页面如何宽高自动呢?

    2015-06-26 20:58 回复
    • 朴人博客

      iframe么?iframe用js实现吧

      2015-06-28 10:45 回复
      • 高原雄鹰影视

        不会搞哦,麻烦大侠,哪里有可以直接用的代码?跪求!

        2015-06-29 09:31 回复
        • 朴人博客

          没有现成代码,可以iframe内部找到父容器设置高度等于body高度,或者外部获取iframe内部body高度自己设置

          2015-06-29 22:16 回复
  4. 涅槃归来

    3、多栏宽度自适应。有没有注意到这个在IE6、7下不能正常显示?有办法解决吗?请指点一二……

    2013-04-01 14:41 回复
    • 朴人博客

      不好意思,目前做项目一般不管ie6,因为不是做网站,我们现在做企业应用最低只兼容7.所以有时间自己研究吧。

      2013-04-01 21:08 回复
  5. 涅槃归来

    第一个绝对居中“left:50%; top:50%; margin-left:-200px; margin-top:-150px”配合默契,但不明原理。其他正在学习中。

    2013-03-27 08:34 回复
    • 朴人博客

      很简单了。left的第一个像素和top的第一个像素放在屏幕中央,按照div实际宽高,除去一半负值,即为中间

      2013-03-27 20:07 回复
  6. eric

    不错,学习了!

    2012-12-04 14:43 回复
  7. 不亦乐乎

    这个貌似许多人研究

    2012-11-23 22:41 回复
  8. 好看电影网

    支持一下

    2012-11-13 14:58 回复
  9. Leniy

    content和sidebar之间的上下箭头按钮滑动挺好看的

    2012-11-12 08:16 回复
    • 朴人博客

      哪?我博客么?

      2012-11-12 18:48 回复
      • Leniy

        恩。就是左边这个方框和上下箭头。配合上一条渐失线,简约又好看

        2012-11-13 08:12 回复
      • Leniy

        咦,刚刚发的评论呢?

        2012-11-13 08:13 回复
        • 朴人博客

          不知道怎么回事,你的地址或者名称估计被举报过,每次都是自动归为垃圾的。

          2012-11-13 19:28 回复
          • Leniy

            好奇怪,是虚拟主机的ip么?

            2012-11-14 07:51 回复

(必填)

(必填)

(可选)