代码示范：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>练习</title>

</head>

<body>

    <div id="main">

            <div id="aside">

                  hello

            </div>

            <div id="content">

                   world

            </div>

        </div>

</body>

<script>

</script>

<style>

    #main  {

        display:flex;

    }

    #aside {

       width:300px;

       height:800px;

       background-color:aquamarine;

    }

    #content {

        height:800px;

        background-color: brown;

        flex:1;

    }

    body {

        margin:0;

    }

</style>

</html>

　　

效果：

flex：1将页面铺满的更多相关文章

  1. PPT如何一页多张打印且铺满整个页面

    最近由于工作需要,有些ppt材料想打印出来学习,但是ppt页数较多,ppt单页打印有些浪费纸张,而且也不能拿到外面打印店去打印,所以只能自己动手设置一页多张打印,并且最后双面打印,这样就做够节省纸张了 ...

  2. 如何使一个div能够铺满整个页面？ && 模态框的制作 && outerHTML

    说明: 使用 ele.outerHTML = '' 这样的方法可以很容易的清除一个元素. 当然也可以使用parent.removeChild() ,但是相较而言,还是使用 outerHTML = '' ...

  3. flex 均分铺满

    <view>充值金额</view> <view class="weui-flex"> <repeat for="{{amount ...

  4. iOS- 解决iOS10 App启动时放大铺满App Icon的问题

    0.前言 iOS10 App启动时放大铺满App图标 iPad Application shows app icon as launch screen in iOS 10 如图,点击APP后APP图标 ...

  5. video作为背景全屏铺满问题

    项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可): 后又发现视频没办法铺满全屏,在不同 ...

  6. Unity2D 背景图铺满与Camera.Size的计算公式

    在unity制作2D游戏的教程,背景图sprite铺满显示时Camaer的Size调到多少合适,作个笔记. 资源参数 background.png 2048x640,Sprite的像素单位:100 调 ...

  7. ExtJS-Viewport背景图片铺满浏览器视图并自动伸缩

    var viewport = Ext.create('Ext.container.Viewport', { style : 'background-image:url(login_bj.jpg);ba ...

  8. js控制图片自动缩放，实现铺满盒子，不变形，完全局中

    此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...

  9. 设置ImageView显示的图片铺满全屏

    转自:http://m.blog.csdn.net/blog/wjwj1203/32334459   为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...

随机推荐

  1. 回退ios版本

    https://ipsw.me/ 访问以上网址,选择自己对应的手机,选择可下载的版本数据,打开itunes,自动备份数据,然后按住alt+左键点击恢复... 成功后. 然后进行备份自己的之前备份的数据 ...

  2. Centos光盘ISO安装过程再理解

    ISO启动时的基本流程 vmlinuz  -> 加载initrd.img -> 加载内核基本驱动 -> 挂载光盘至/run/install/repo -> 启动anaconda ...

  3. org.apache.hadoop.hbase.master.HMasterCommandLine: Master exiting java.lang.RuntimeException: HMaster Aborted

    前一篇的问题解决了,是 hbase 下面lib 包的jar问题,之前写MR的时候加错了包,替换掉了原来的包后出现另一问题:@ubuntu:/home/hadoop/hbase-0.94.6-cdh4. ...

  4. 年底了，该跳槽了，全套高级Java面试题及答案整理～

    又到年底了,又是一轮跳槽季 城外的人想进去,城里的人想出来 为什么离职? 马云说过,要么工资低,要么受了委屈 我想大多数人离职是这个原因 出来混的,跳槽也都是为了更好的生活 干技术的,工资都是跳出来的 ...

  5. MySQL 8.0及以上版本设置密码

    ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'password';

  6. 48-Ubuntu-系统信息-3-查看进程命令

    序号 命令 作用 01 ps aux  process status查看进程的详细状况 02 top 动态显示运行中的进程并且排序 03 kill [-9] 进程代号 终止指定代号的进程,-9表示强行 ...

  7. C语言之内存分配函数

    #include <stdio.h> #include <stdlib.h> #include <string.h> int main() { /********* ...

  8. ASP.NET 中 ContentType 类型

    在ASP.NET中使用Response.ContentType="类型名";来确定输出格式 不同的ContentType 会影响客户端所看到的效果.默认的ContentType为 ...

  9. 笔记40 Spring Web Flow——订单流程（构建订单）

    二.订单子流程 在识别完顾客之后,主流程的下一件事情就是确定他们想要什么类型 的披萨.订单子流程就是用于提示用户创建披萨并将其放入订单中 的,如下图所示. showOrder状态位于订单子流程的中心位 ...

  10. kubeadm部署一个Kubernetes集群

    kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具.这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Master 节点 $ kubeadm in ...