`
hope598
  • 浏览: 66838 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

网页div内容居中显示及高度自适应

    博客分类:
  • css
阅读更多

居中显示:

#a{
 margin:0px auto;
}

 

高度自适应:

html,body{
 margin:0px;
 height:100%;
}
#left{
 width:600px;
 height:100%;
 float:left;
}

 

      代码非常简单,对#left对象设置了height:100%,然而也能看出,同时设置了html与body的height:100%,这就是高度自适应问题的关键所在。一个对象的高度是否可以使用百分比显示,取决于对象的父级对象。在页面中,#left直接放置在body之中,因此它的父级对象是body,而在默认状态下,浏览器并是没有给body一个高度属性,因此我们所设置的#left为height:100%,并不会产生任何效果。但是,一旦我们给body设置了100%之后,它的子级对象#left的height:100%便发生作用了,这便是浏览器解析规则引发的高度自适应问题。
      代码中除了给出body定义之外,还给html对象也应用了相同的样式定义,这样做的好处是,使IE与Firefox浏览器都能够实现高度自适应,IE与Firefox对页面对象的解析方式存在一定差异。在IE中,html对象默认为100%的高度,body却不是。而在Firefox中,html标签就不是100%高度,因此我们给两个标签都定义为height:100%,可以保证两款浏览器下均能够工作正常。

分享到:
评论

相关推荐

    浮动的div自适应居中显示的js代码

    总结一下,实现浮动`div`自适应居中显示的关键步骤包括: 1. 获取外层容器的宽度。 2. 计算`div`应距离左侧的距离,使其居中。 3. 使用`css()`方法更新`div`的`left`属性。 4. 添加窗口大小改变的监听事件,确保...

    鼠标移动到div上显示制定信息或者div(自适应显示位置)

    在网页设计中,有时我们需要实现一个功能:当用户将鼠标悬停在某个div元素上时,显示特定的信息或另一个div。这个功能可以增强用户体验,帮助用户更好地理解和操作页面。本教程将详细介绍如何实现这一功能,并确保...

    div完美自适应动态上下左右居中

    复制代码代码如下: div { position:absolute; width:500px; height:260px; top:50%; left:50%; margin-left:-250px; height:-130px; z-index:1000; } 文字居中:text-align:center; height:22px;line-height:22px;...

    DIV+CSS DIV居中布局

    本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先,我们要理解`<div>`元素。`<div>`是“division”的缩写,代表一个区域或区块,在HTML中用于组合其他元素,是构建网页布局的基础。通过设置`<div>`...

    Jquery图片自适应大小并居中

    本文将通过一个具体的示例,详细介绍如何使用Jquery来实现图片的自适应大小及居中功能。 #### 背景介绍 在实际应用中,经常会遇到这样的场景:页面中的图片可能由于源图的比例问题导致在不同尺寸的容器中显示时出现...

    html div 自适应剧中 上下左右全部居中

    html div 自适应剧中 上下左右全部居中

    button自适应高度和自动换行

    `,可以让容器内的按钮在垂直方向上居中,同时根据内容自动调整高度。 2. CSS Grid:CSS Grid布局也提供了高度自适应的解决方案。通过`grid-template-columns: auto;`和`grid-auto-rows: min-content;`,可以创建一...

    CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)

    CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~

    设置DIV最小高度以及高度自适应随着内容的变化而变化

    结合上述属性,我们可以创建一个既能保持最小高度又能自适应内容高度的`<div>`。在提供的代码示例中,`.divHeight`类应用了以下样式: ```css .divHeight { height: 400px; /* 初始化高度 */ height: auto; /* 这...

    layer弹出层自适应高度,垂直水平居中的实现

    在网页开发中,有时我们需要创建弹出层(popup layer)来显示特定的内容,例如提示信息、表单或者对话框。`layer` 是一个常用的 JavaScript 弹窗插件,它提供了丰富的功能,包括弹出层的自适应高度和垂直水平居中。...

    完全纯css实现div自适应居中兼容IE7 Chrome FireFox

    在本篇内容中,介绍了如何使用纯CSS技术实现div元素在网页中的自适应居中布局,同时确保兼容性可以覆盖至较旧的浏览器版本,如IE7、Chrome和Firefox。此处的自适应居中,指div能够在其父容器内水平及垂直方向上都...

    自适应居中图片轮播

    在网页设计中,自适应居中图片轮播是一种常见的交互元素,它能够为用户提供动态、美观的视觉体验,同时能够适应不同的屏幕分辨率和设备尺寸。本文将深入探讨自适应居中图片轮播的设计原理和实现方法,以及相关技术在...

    css 水平居中,垂直居中,自适应宽度的代码

    一、宽度自适应的元素水平居中:  1.宽度自适应的元素可以是:绝对位定、浮动元素、行内元素。而我们通常布局,肯定不会用行内元素,所以会选择,绝对定位或浮动。 2.居中:这里我们应该会想到1/2、50%、一半等...

    div或img图片高度随宽度自适应的方法

    该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动。 一、可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了)。 利用js来实现...

    CSS+JS 蒙板居中技术,居中技术,使用JS获取div的宽度高度?

    至于“蒙版居中”,通常是指在页面上创建一个半透明的遮罩层,然后让内容在其上居中显示。这在弹窗、加载提示等场景中很常见。你可以创建一个全屏的蒙版元素,然后将需要居中的内容作为一个子元素,应用上述的CSS...

    让html元素随浏览器的大小自适应垂直居中的实现方法

    表格可以实现td中的元素垂直居中显示,但是前提条件必须定义td的高才可行。 但是很多时候会用到元素跟随浏览器的大小垂直居中,如在制作展示官网、活动展示网等等的时候。 问题: 实现div垂直居中并在缩放浏览器尺寸...

    使用bootstrap的H5页面登录框自适应水平居中、垂直居中

    3. 使用绝对定位:为登录框设置绝对定位,然后通过计算窗口的一半减去元素高度的一半来设置`top`属性,实现垂直居中。同时,设置`left: 50%`并应用`transform: translateX(-50%)`使其水平居中。 在描述中提到的...

    DIV始终居中的半透明弹出层.rar

    在网页设计中,"DIV始终居中的半透明弹出层"是一个常见的需求,它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先,`DIV`是HTML中的一个块级元素,常用于创建网页布局结构。在本...

Global site tag (gtag.js) - Google Analytics