文档章节

高度自适应

Clover286
 Clover286
发布于 2016/09/08 22:21
字数 164
阅读 9
收藏 0

方法1:设置HTML body  以及要实现100%高度的元素的高度为100% 

<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这个div的高度会100%
      </p>
    </div>
  </body>
</html>

方法2:对要自适应高度的元素设置position: absolute;top:0;bottom:0;

利用这个方法,可以实现顶部菜单固定高度,下面内容块自适应高度,高度充满整个频幕

HTML

<body>
		<div class="menu">上面</div>
		<div class="box">
			高度自适应
		</div>
</body>

CSS:

         * {
				margin: 0;
				padding: 0;
			}
			
			.box {
				position: absolute;
				top: 70px;
				bottom: 0;
				background: #ddd;
				width: 100%;
			}
			
			.menu {
				height: 70px;
				background: blue;
			}

 

还可以延伸到3栏,中间自适应高度

© 著作权归作者所有

Clover286
粉丝 10
博文 210
码字总数 67024
作品 0
武汉
程序员
私信 提问
iframe自适应高度的多种方法方法小结

第一种方法:代码简单,兼容性还可以,大家可以先测试下。 function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window.opera) { if (win.contentDocume......

华山猛男
2014/03/27
145
0
UITableViewCell的高度缓存

让UITableViewCell高度自适应的方法有两种 1、对UITableView进行设置 2、通过代理返回 使用自适应高度时,在Cell每次即将被展示出来的时候都会调用Cell中的 ⬇️方法进行计算。 但是系统计算...

侯航磊
2018/11/08
0
0
DIV默认高度且自适应高度

转: 本文和大家重点讨论一下如何控制DIV最小高度又DIV自适高度问题,如果我们需要设置一个div高度,当里面的东西超过这个高度时,让这个容器自动被撑开,也就是DIV自适应高度。当里面的信息...

Zero零_度
2015/04/28
1K
0
好程序员web前端分享高度自适应

好程序员web前端分享高度自适应 一、宽高自适应 网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。 它能够使网页显示更灵活,可...

好程序员IT
05/05
14
0
表格视图嵌套WKWebView高度自适应

前言 Important Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView. WKWebVIew是iOS8新出的API,旨在替代原有的UIWebVi......

WB_小文
2017/11/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周二乱弹 —— 开发语言和语言开发的能一样么

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @花间小酌:#今日歌曲推荐# 分享The Score的单曲《Revolution》 《Revolution》- The Score 手机党少年们想听歌,请使劲儿戳(这里) @批判派...

小小编辑
今天
687
9
oracle ORA-39700: database must be opened with UPGRADE option

ORA-01092: ORACLE instance terminated. Disconnection forced ORA-00704: bootstrap process failure ORA-39700: database must be opened with UPGRADE option 进程 ID: 3650 会话 ID: 29......

Tank_shu
今天
3
0
分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
聊聊DubboDefaultPropertiesEnvironmentPostProcessor

序 本文主要研究一下DubboDefaultPropertiesEnvironmentPostProcessor DubboDefaultPropertiesEnvironmentPostProcessor dubbo-spring-boot-project-2.7.3/dubbo-spring-boot-compatible/au......

go4it
昨天
2
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部