css 背景颜色占满一屏高度自适应

我就是我 2022-05-30 00:29 397阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" charset="utf-8">
    	<title></title>
    	<style type="text/css">
    		body{
    			margin: 0;
    			padding: 0;
    		}
    		.con{
    			background: #3A8BE9;
    			height: 100vh;
    		}
    		.secs{
    			position: relative;
    			top: 10vh;
    		}
    		.secs>div{
    			display: flex;
    			flex-direction: column;
    			align-items: center;
    		}
    		.sec1_p2{
    			margin-top: -2vh;
    		}
    	</style>
    </head>
    <body>
    	<div class="con">
    		<div class="secs">
    			<div class="sec1">
    				<img src="./img/1.jpg">
    				<p>青蓝</p>
    				<p class="sec1_p2">念经(coding)、参禅(think)...</p>
    			</div>
    			<div class="sec2">
    				<div>
    					1111
    				</div>
    				<div>
    					2222
    				</div>
    				<div>
    					3333
    				</div>
    			</div>
    		</div>
    	</div>
    </body>
    </html>

最重要的是100vh。vh是指相对视口的高度。

![20180228163648948][]

[20180228163648948]: /images/20220530/ba0a00ce4b7d4cf5bb472b2486bbe76f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，397人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue学习经验总结（子组件高度自适应撑满整屏）

1.在app.vue页面设置高度百分百 <style lang="stylus"> app{ height: 100%; margin

ゞ浴缸里的玫瑰/ 2023年01月02日 07:29/ 0 赞/ 126 阅读

相关 div背景图自适应占满

css代码： background-image: url(../imgs/footerkuang.png); background-repeat: no-re

女爷i/ 2022年12月21日 04:54/ 0 赞/ 149 阅读

相关 html页面高度自适应的特点,css如何高度自适应浏览器高度？

高度自适应就是高度能跟随浏览器窗口的大小改变而改变，典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏，下面一栏高度自适应用于显示内容。 ![682b19391f3

悠悠/ 2022年10月06日 08:00/ 0 赞/ 331 阅读

相关全屏自适应背景图

主要代码下： (function($) \{ $.fn.fullBg = function()\{ var bgImg = $(this); func

蔚落/ 2022年08月25日 12:58/ 0 赞/ 224 阅读

相关 CSS背景铺满全屏

html { background: url(images/bg.png) no-repeat center center fixed; -webkit-backgro

Love The Way You Lie/ 2022年08月18日 11:41/ 0 赞/ 190 阅读

相关 ImageView宽度填满屏幕，高度自适应

> 原文链接：[http://blog.csdn.net/easion\_zms/article/details/50263409\comments][http_blog.cs

你的名字/ 2022年06月17日 04:45/ 0 赞/ 294 阅读

相关 css 背景颜色占满一屏高度自适应

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=devi

我就是我/ 2022年05月30日 00:29/ 0 赞/ 398 阅读

相关 css实现左边高度自适应右边高度

css样式： <style> .container { width: 960px;

一时失言乱红尘/ 2022年04月11日 14:07/ 0 赞/ 451 阅读

相关 css背景图自适应

在开发时，修改了d2admin的登录页面。使用了背景图片，但是ui给的图过于大（可能是我电脑屏幕小哈）无法完整的显示到页面上，所以修改了代码，可以完整显示背景图。代码如下：

迈不过友情╰/ 2022年01月06日 14:09/ 0 赞/ 380 阅读

相关高度自适应

开发中遇到一个问题，要求不管在多高的屏幕下，图片(什么都行)到底部的距离都应该和psd一致，flash里面的问题 ![70][] //定义宽度 var psdWidth

约定不等于承诺〃/ 2021年09月16日 06:40/ 0 赞/ 510 阅读