多个div占满整个屏幕（或页面）（待补充及理解）

    <div id="app" class="outer"><h3 class="head">Head组件</h3><div class="container"><h3 class="left">Left组件</h3><h3 class="main">Main组件</h3></div></div>

第一种方法：

        html,body {height: 100%;margin: 0;padding: 0;}.outer {height: 100%;padding: 100px 0 0;box-sizing: border-box;}h3 {margin: 0;padding: 0;}.head {background-color: antiquewhite;height: 100px;line-height: 100px;text-align: center;margin: -100px 0 0;}.container {display: flex;height: 100%;}.left {background-color: aqua;flex: 2;text-align: center;}.main {background-color: blueviolet;flex: 8;text-align: center;}

效果：

第二种方法：

  html,body {height: 100%;margin: 0;padding: 0;}.outer {height: 100%;padding: 100px 0 0;box-sizing: border-box;position: relative;}h3 {margin: 0;padding: 0;}.head {background-color: antiquewhite;height: 100px;line-height: 100px;text-align: center;position: absolute;top: 0;left: 0;width: 100%;}.container {display: flex;height: 100%;}.left {background-color: aqua;flex: 2;text-align: center;}.main {background-color: blueviolet;flex: 8;text-align: center;}

效果：如上图

多个div占满整个屏幕（或页面）（待补充及理解）相关推荐

怎样使div铺满整个屏幕
问题:怎样使div铺满整个屏幕解决办法:设置body宽高都为100%,再设置需要修改的元素宽高为100%
html页面撑满整屏幕,让div撑满整个屏幕的方法（css）
这篇文章主要介绍了关于让div撑满整个屏幕的方法(css),有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下在body只有一个p的时候,可以通过这样的方式让p撑满整个屏幕. 1.给p设置 ...
LabVIEW前面板占满整个屏幕
LabVIEW前面板占满整个屏幕在运行一个LabVIEW程序时,它的前面板能够占据整个屏幕,且不显示Windows的任务栏或其他任何的LabVIEW菜单选项.怎样才能实现这一功能? 可以通过手动配置 ...
网页占满整个屏幕_CSS网页背景图片等比例占满整个页面的解决方案
需求是这样的: 一个登录界面,让一张背景图片充满整个页面.需求看似非常简单,可是测试人员提的一个bug引起了我深入的思考.先上图,正常界面是这样的: 界面结构很简单,一个登录框,加一张背景图.我们都知 ...
微信小程序中使view占满整个屏幕高度的实现方法
前言: 今天做小程序的时候,在项目中要用到一个view占满屏幕高度和宽度,然后再在这个view里放置其他元素的情况. 宽度很简单,直接设置width: 750rpx;或者width: 100%;就行. ...
微信小程序中图片占满整个屏幕实现方法
将body和html设置为100%,这样我们就可以在他们的子元素中使用height:100%来使的我们的容器元素占满屏幕的高度啦. 但是在微信小程序中,是没有dom对象的,根节点是page,使用pag ...
浏览器占满整个屏幕_如何实现div布满整个浏览器，全屏
响应式网站建设今天一个流行的设计处理的网站是为了填补宽度和浏览器窗口的一个大的图像和/或消息主页上的高度.在网站的响应在布局的改变基于用户的设备和屏幕尺寸,如果他们要包括可用于这些各种屏幕空间这些屏 ...
css实现div中图片占满整个屏幕
<div class="img"></div>.img{background: url("../assets/image/img.png" ...
如何让div的大小占满整个屏幕？
一.先来代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...

多个div占满整个屏幕（或页面）（待补充及理解）

多个div占满整个屏幕（或页面）（待补充及理解）相关推荐

最新文章

热门文章