css 高度自适应

摘要:
需要重写:html,body{margin:0px;height:100%;}#中心{200px;高度:100%;背景色:#666666;边框:1px实心;}#center object的高度设置为100%,html和body的高度设置设置为100%。这是高度适应性的问题。对象的高度是否可以百分比显示取决于对象的父对象。在页面中,#center直接放置在body属性中,因此它的父对象是body。默认情况下,浏览器不会为身体赋予高度属性,因此,我们将#center设置为100%高度,这不会产生任何效果。然而,在我们将body设置为100%后,其子类对象#center的height:100%将起作用。这是由浏览器解析规则引起的高度适应性问题。

对象height:100%并不能直接产生效果,是因为跟其父对象有关。

#center{
height:100%;
}

上面的css样式是无效的,不会产生任何效果。

需要改写:

html,body{
margin:0px;
height:100%;
}
#center{
200px;
height:100%;
background-color:#666666;
border:1px solid red;
}
 

对#center对象设置了height:100%,同时设置了html与body的height:100%,这就是高度自适应的问题所在,一个对象的高度是否可以使用百分之比显示,取决于对象的父类对象,在页面中,#center直接放在body属性中,因此它的父类对象是body,而在默认状态下,浏览器并没有给body一个高度属性,因此我们所设置的#centere为height:100%并不会产生任何效果,但是一点我们给body设置了100%之后,他的子类对象#center的height:100%便发生作用了,这便是浏览器解析规则引发的高度自适应的问题。

  代码中除了给出body的定义属性之外,还给html对象也应用了相同的样式定义,这样做的好处是使IE与firefox浏览器都能够高度自适应,Ie与firefox对页面的解析存在一定的差异,ie中html对象默认为100%的高度,而body不是,而在firefox中html标签就不是100%的高度,因此两个标签都设置为100%,可以保证两款浏览器都能正常工作。

免责声明:文章转载自《css 高度自适应》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇win7下JAVA环境变量配置方法Vue中Class与Style几种绑定用法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

NuxtJS处理因css在服务端渲染而增加源代码量,从而影响到SEO的问题

关于Nuxt的css嵌入到html代码中的问题,效果如下: 解决方案其实很简单:在nuxt.config.js文件中的build对象添加extractCSS:{allChunks:true},extractCSS是将内嵌的css提取到外部,allChunks代表所有的都执行,代码如下: build: {     extractCSS: { allChu...

用css画图标

css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一些简单的图标。 这些图标很多是通过三角形来拼贴起来的,所以我们需要知道怎么样画三角形。 1. 我们要将该 div 的 width 和 height 都设置为...

vue-cli3热更新配置,解决热更新失败的问题,保存代码浏览器自动刷新

在vue,config.js中配置css热更新 const IS_PROD = ['production', 'test'].includes(process.env.NODE_ENV) css:{ //是否使用css分离插件ExtractTextPlugin extract:IS_PROD, //开启CSSsourcemaps? sourceMap...

css中max-width和min-width的应用

1.一般我们在布局时,不想要元素的宽度限定死,并且想要它的实际宽度随其本身内容自适应,但又不想宽度过大破坏整体布局,这个时候就会应用到max-width限制元素的最大宽度,元素实际宽度在0~max-width之间。 <!DOCTYPE html> <html lang="en"> <head> <meta...

实现JTable的列宽与内容的自适应

 JTable默认的各列宽度平均,下函数可以实现各列宽度与内容长度适应!来自互联网~ 1 public void FitTableColumns(JTable myTable){ 2 JTableHeader header = myTable.getTableHeader(); 3 int rowCount = myTable.getR...

CSS图片垂直居中方法

让div里面的多行文本垂直居中的方法: div{height:100px;100px;border:solid 1px red;text-align:center; display:table-cell;vertical-align:middle} 下面是网上好不容易找的多种办法: 看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢...