css 设置页面与屏幕同样高度

因为html默认height为0
所以如果要设置页面与屏幕同高，就要设置为height:100%，然后再将body的height也设置100%

html,body{height:100%
}

例子：

html{height: 100%;
}
body{height: 100%;width: 100%;margin: 0;padding: 0;    }
.father{height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;background-color: sandybrown;
}
.son{background-color: rebeccapurple;height: 50px;width: 50px;margin: 0 auto;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="垂直居中.css">
</head>
<body><div class="father"><div class="son"></div></div>
</body>
</html>

css 设置页面与屏幕同样高度相关推荐

CSS设置页面背景色
CSS设置页面背景色设置页面的背景色 CSS通过设置body标记的background-color属性来实现,背景色主要突出页面的主题,跟前景的文字颜色相配合. 具体的设定方法和文字颜色值的设定一样 ...
CSS 设置页面缩放
为了设置页面缩放,可以使用以下 CSS 属性: body {zoom: 80%; /* 缩放比例 */ } 或者使用以下 CSS 属性: body {transform: scale(0.8); /* ...
css设置宽高相等，高度自适应
文章目录 1.img设置宽度后,高度可以根据图片的原始尺寸自动得出 2.可以设置宽度,然后设置宽高比来得出高度参考链接 1.img设置宽度后,高度可以根据图片的原始尺寸自动得出 2.可以设置宽度,然 ...
CSS设置div与屏幕高度一致
具体实现 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8 ...
html怎么设置页面自适应屏幕大小,网页设计设置页面自适应屏幕宽度
方法: 1.在网页头部加上这样一条meta标签: 解释: width=device-width :宽度等于设备屏幕的宽度 initial-scale=1.0:表示:初始的缩放比例 minimum-sc ...
怎么调整html文本域宽度和高度,如何使用CSS设置textarea的宽度和高度？
这是我的css: .editor-field textarea { width : 400; height : 100px; } 这是我的观点的标记: @Html.EditorFor(model =& ...
利用CSS设置页面的垂直居中效果
实现垂直居中关键的属性是text-align(文字的对其样式),line-align(垂直居中的高度),vertical-align(垂直居中) <!DOCTYPE html> <h ...
css根据当前宽度设置css,JS和CSS实现自动根据分辨率设置页面宽度
为了实现自动根据分辨率设置页面宽度,首先我们要先知道一个JavaScript脚本document.documentElement.clientWidth获取页面宽度. 为了说明在IE和FireFox等 ...
html图片的宽度和高度设置,CSS设置img图片的宽度和高度
如何使用CSS控制HTML中图片高度宽度,统一对象内图片高度宽度等样式属性? 我们在布局图片列表时,通常我们要控制img图片的高度和宽度这样来达到图片统一. 如以下这个的图片列表布局示图图片img高 ...

css 设置页面与屏幕同样高度

css 设置页面与屏幕同样高度相关推荐

最新文章

热门文章