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>
扫一扫
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
