代码示范:

<!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. MySQL数据库(二)——库相关操作、表相关操作(一)、存储引擎、数据类型

    库相关操作.表相关操作(一).存储引擎.数据类型 一.库相关操作 1.创建数据库 (1)语法 create database 数据库 charset utf8; (2)数据库命名规范 可以由字母.数字 ...

  2. python中字符串输出格式

    print输入格式总结 通过使用ljust(),center(),rjust()函数来实现输入字符串的左右对齐,居中,右对齐等操作; 方法一:(函数不带参数,则默认以空格填充,注意:文字与空格总字符数 ...

  3. centos7.3 编译安装 git 2.13

    安装依赖包 sudo yum install curl-devel expat-devel gettext-devel openssl-devel zlib-devel perl-devel 安装 $ ...

  4. vue中:key 和react 中key={} 的作用,以及ref的特性?

    vue中:key 和react 中key={} 为了给 vue 或者react 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性 一句话概括就是 ...

  5. (Struts2学习系列四)Struts2指定配置文件

    我们的每个action都在struts.xml里配置的话,就会出现很多的xml语句,单单一个struts.xml就会变得很大,所以我们会在struts.xml里使用include引入其他的.xml文件 ...

  6. myEclipse环境下配置springMvc项目,进行简单的请求

    1."File-->New-->WebProject"新建一个web项目,命名为springMvc 2.将所需要用到的jar包复制到WEB-INF/lib路径下,然后右 ...

  7. vim - Vi IMproved, 一个程序员的文本编辑器

    总览 (SYNOPSIS) vim [options] [file ..] vim [options] - vim [options] -t tag vim [options] -q [errorfi ...

  8. cross compile 交叉编译 ffmpeg

    ffmpeg 支持各种压缩格式的视频解码库,经常出现在各种播放器中,交叉编译也是一项麻烦的事情. 1. 下载ffmpeg 源码包   http://ffmpeg.org/releases/ffmpeg ...

  9. ubuntu下网页视频或音频无法播放

    有时,网页的音频或视频内容在 Firefox 下无法正常下载和播放.所需的插件没找到.过期.被阻止.和其他插件或扩展冲突,或者是内容由于某种原因被阻止.本文会帮助你解决这些问题. Flash 插件 F ...

  10. css美化checkbox的样式

    使用iCheck插件可以改变checkbox.radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的c ...