高度设置为100%无效的解决办法
In specific, all percentage-based sizes must inherit from parent block elements, and if any of those ancestors fail to specify a size, they are assumed to be sized at 0 x 0 pixels
具体地讲，所有基于本分比的尺寸必须从父块元素继承，并且如果任一父项未能指定尺寸，则它们的尺寸假定为0 x 0像素
所以高度是从父div上继承而来的，如果父div的高度为0，那么继承的肯定也是0
默认情况下，html和body的高度都是0，所以要先将其设置为100%，后面的div的100%才会生效。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,body{
margin:0;
height:100%;
}
</style>
</head>
<body style="margin: 0px; ">
<div style="width: 100%;height:100%;">
<div style="width: 200px;height:100%;position: absolute;top 0; background: red;" >red</div>
<div style="box-sizing: border-box; width: 100%;height:100%;padding-left: 200px; background-color: green;">
ss
</div>
</div>
<!--<div style="width: 100%;display:-webkit-box;display: -moz-box; ;">
<div class="boxone" style="width:200px;height: 100px;background: red; ">1</div>
<div class="boxtwo" style="-webkit-box-flex:1;-moz-box-flex: 1; height: 100px;background: green; ">2</div>
</div>
</div>-->
</body>
<script>
</script>
</html>
高度设置为100%无效的解决办法相关推荐
- 通过设置修改默认浏览器无效的解决办法--修改注册表
通过设置修改默认浏览器无效的解决办法--修改注册表 问题描述: win7下通过控制面板设置Chrome为默认浏览器时无效(系统貌似默认IE浏览器为默认浏览器) 解决方法: 第一步:快捷键win+R , ...
- Hyper-V导出虚拟机/导入虚拟机步骤（克隆），以及克隆之后设置静态IP无效的解决办法
目录 导出虚拟机 导入虚拟机 重点来了:克隆之后设置静态IP无效 解决克隆之后设置静态IP无效 在做微服务项目时,经常会用到多台机器来搭建服务环境.在不想一台一台虚拟机创建的情况下,克隆虚拟机是最好的 ...
- C# 反射 设置字段值无效的解决办法
FieldInfo.SetValue的原型是:void SetValue(object obj, object value) 当你传递一个值类型(结构是值类型)的时候,它要转化成object,也就是要 ...
- qt设置反锯齿无效的解决办法
最近使用QGraphicsView和opengl混合编程,发现设置反锯齿无效,经过多方调试发现要特殊设置才可以生效 1. QGraphicsView::setRenderHints(QPainter: ...
- vue中设置height:100%无效的问题及解决方法
在vue.js中写新的components的时候,如果在新页面中的模板中设置height:100%的时候一直无效,在App.vue中:<template><div id=" ...
- VirtualBox桥接网络设置无效的解决办法
VirtualBox桥接网络设置无效的解决办法 前提:如果本机Windows系统和VirtualBox虚拟机没在一个网段,虚拟机网络设置桥接 1.更改网络适配器–以太网(属性),右键属性 2.安装–选 ...
- android设置返回按钮无效,Android onKeyDown监听返回键无效的解决办法
Android onKeyDown监听返回键无效的解决办法 当我们的Activity继承了TabActivity,在该类中重写onKeyDown是监听不到返回键的, 具体解决方法如下: 重写dispa ...
- vscode自动加前缀_详解VScode自动补全CSS3前缀插件以及配置无效的解决办法
1.在vscode中搜索Autoprofixer 2.在安装完成之后要配置 在需要添加前缀的css文件上,右键点击命令面板,输入Autoprefixer CSS就好啦 ps: 如果想要兼容性最好的话, ...
- 记录webView接入h5界面时，调起相册、文件、相机无效的解决办法
记录webView接入h5界面时,调起相册.文件.相机无效的解决办法. 在开发项目时,接入一个h5界面.使用webview时,发现界面显示正常,但是按钮不论怎么点都无效,但是m站和ios都正常.后来上 ...
- SqlServer2005/2008下sysproperties无效的解决办法
SqlServer2005/2008下sysproperties无效的解决办法 if exists (select 1 from sysobjects where name = 'syspropert ...
最新文章
- Get 了滤镜、动画、AR 特效，速来炫出你的短视频开发特技！
- es6箭头函数this问题
- 6-4 链表拼接 (20分)_青岛喷绘制作公司不愿透露的喷绘布拼接与安装技巧，建议收藏...
- 深入理解python之self
- Android魔法（第四弹）—— 一步步实现百叶窗效果
- ssas 数据源mysql_BI之SSAS完整实战教程2 -- 开发环境介绍及多维数据集数据源准备...
- NSwag 和 ASP.NET Core
- 媒体查询响应式布局的几个尺寸_媒体查询实现响应式布局
- 学习vue3系列computed
- python海龟图画龙珠_DeepOps的Python小笔记-天池龙珠计划-Python训练营-Task 02:DAY5
- 我和老公清北毕业，我能接受自己的孩子读三流学校吗？
- RubyOnRails with Ajax
- MySQL 5.7详细下载安装配置教程
- 什么是索引回表，如何避免（索引覆盖）
- linux 下不错的html编辑器bluefish
- 《思考力---引爆无限潜能》书摘（一）
- Python——全国二级等级考试
- Cisco CCIE之建立详细的故障检测检查表
- Cesium 两点之间的直线距离
- 企业公众号推送什么内容？企业公众号内容可以发哪些？