html如何适配设备高度,css怎样自适配屏幕高度？

css怎样自适配屏幕高度？下面本篇文章给大家介绍一下css实现自适应屏幕高度的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css实现自适应屏幕高度

在CSS中，可以通过设置height属性的值为100%(相对长度)来让自适应屏幕高度。

Document

body,html{

margin:0px;

height:100%;

}

.div1{

width:100px;

height:100%;

background:red;

}

说明：

百分比是一个相对长度单位，相对于包含块(containing block)的高宽或字体大小来取值。

关于包含块(containing block)的概念，不能简单地理解成是父元素。

如果是静态定位和相对定位，包含块一般就是其父元素。

如果是绝对定位的元素，包含块应该是离它最近的 position为非static属性的祖先元素。

如果是固定定位的元素，它的包含块是视口(viewport)。

具体可以参考 W3Help。

更多web前端自学知识，请查阅 HTML中文网！！

html如何适配设备高度,css怎样自适配屏幕高度？相关推荐

CSS 获取当前可视屏幕高度--使用calc()方法动态计算宽度或者高度
先了解一下CSS3的相对长度单位和绝对长度单位(参考详细教程) : 相对长度单位相对长度单位指定了一个长度相对于另一个长度的属性.对于不同的设备相对长度更适用. 单位描述 em 它是描述相对于应用 ...
CSS设置div与屏幕高度一致
具体实现 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
android 中测量高度和宽度,android获得屏幕高度和宽度（display中getSize(Point)方法使用）...
方法一: public static int SCREEN_WIDTH; public static int SCREEN_HEIGHT; //获取屏幕 WindowManager wm = (Win ...
html自动适应屏幕分辨率,css如何设置适配不同分辨率屏幕？
css如何设置适配不同分辨率屏幕?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何设置适配不同分辨率屏幕? 在使用div+css网页布局时,可以 ...
前端CSS移动端适配
导读移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方案横屏适配高清屏图片模糊问题 ... 上面这些问题可能我们在开发中 ...
从设备像素比到移动适配
一.设备像素比(device pixel ratio ) 视觉稿在前端开发之前,我们会有一个psd文件,称之为视觉稿.对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 首 ...
js／css 检测移动设备方向的变化判断横竖屏幕
js/css 检测移动设备方向的变化判断横竖屏幕方法一:用触发手机的横屏和竖屏之间的切换的事件 window.addEventListener("orientationchange&qu ...
iOS设备分辨率 UI规范以及适配
iPhone/iPod Touch 普通屏 320像素 x 480像素 iPhone 1.3G.3GS,iPod Touch 1.2.3 3 ...
css3 高度最小100%,100％最小高度CSS布局
我正在使用以下代码:CSS布局-100%的高度最小身高此页面的#container元素的最小高度为100%.这样,如果内容所需的高度大于视口提供的高度,则#content的高度也会强制#conta ...
纯CSS实现侧边栏/分栏高度自动相等
一.为何要分栏高度一致? 分栏高度一致的目的是更加美观.举两个例子吧 2.1 对于分栏布局,我们或许会用边框(border)进行分隔,就如鄙人博客的分栏此时最担心的问题就是高度不一致,尤其是无边框属 ...

html如何适配设备高度,css怎样自适配屏幕高度？

html如何适配设备高度,css怎样自适配屏幕高度？相关推荐

最新文章

热门文章