将div的宽度和高度设置为百分比
[英]Set width and height to div as percent
问题描述
There are three divs , one of them is parent and two are children. 
共有三个divs ，其中一个是父级，两个是子级。 The first child has always 100px height, the second child has rest of parent's height and both of them have parent's width. 第一个孩子的身高始终为100px，第二个孩子的其余身高为父母，并且两个孩子的宽度均为父母的宽度。 I want to use it to make my parent div responsive(fullscreen). 我想用它来使我的父div响应（全屏）。 There is my code for this task: 我的代码可以完成此任务：
<html>
<head>
<style>
#parent{
position: relative;
background-color: red;
width: 200px;
height: 400px;
}
#firstChild{
margin-left: 5px;
margin-right: 5px;
position: absolute;
background-color: green;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: 100px;
}
#secondChild{
margin-left: 5px;
margin-right: 5px;
position: absolute;
background-color: blue;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: -moz-calc(100% - 100px);
height: -webkit-calc(100% - 100px);
height: -o-calc(100% - 100px);
height: calc(100% - 100px);
margin-top: 100px
}
</style>
</head>
<body>
<div id="parent">
<div id="firstChild"></div>
<div id="secondChild"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fullscreen-min.js"></script>
<script>
document.addEventListener('mousedown', onDocumentMouseDown, false);
function onDocumentMouseDown(){
$("#parent").fullScreen(true);
}
</script>
</body>
</html>
it works great as a normal screen and as a fullscreen: 它在普通屏幕和全屏模式下都很好用：
problem is when I tried to change first and second divs(constant 100px should be on bottom): 问题是当我尝试更改第一和第二个div时（常数100px应该在底部）：
<html>
<head>
<style>
#parent{
position: relative;
background-color: red;
width: 200px;
height: 400px;
}
#firstChild{
margin-left: 5px;
margin-right: 5px;
position: absolute;
background-color: green;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: calc(100% - 100px);
}
#secondChild{
margin-left: 5px;
margin-right: 5px;
position: absolute;
background-color: blue;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: 100px;
margin-top: -moz-calc(100% - 100px);
margin-top: -webkit-calc(100% - 100px);
margin-top: -o-calc(100% - 100px);
margin-top: calc(100% - 100px);
}
</style>
</head>
<body>
<div id="parent">
<div id="firstChild"></div>
<div id="secondChild"></div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="jquery.fullscreen-min.js"></script>
<script>
document.addEventListener('mousedown', onDocumentMouseDown, false);
function onDocumentMouseDown(){
$("#parent").fullScreen(true);
}
</script>
</body>
</html>
the result is: 结果是：
I'm not sure why it doesn't work when the first div's height is in percent and the second height is represented by the constant value. 我不确定为什么当第一个div的高度为百分比，而第二个高度由常数表示时，为什么它不起作用。 Can anyone explain what is wrong with my code and why doesn't it work? 谁能解释我的代码有什么问题，为什么它不起作用？
1 个解决方案
解决方案1
0 已采纳 2017-04-15 12:40:22
Add bottom:0px; 添加bottom:0px; to #secondChild 至#secondChild
#secondChild{
margin-left: 5px;
margin-right: 5px;
position: absolute;
background-color: blue;
width: -moz-calc(100% - 10px);
width: -webkit-calc(100% - 10px);
width: -o-calc(100% - 10px);
width: calc(100% - 10px);
height: 100px;
margin-top: -moz-calc(100% - 100px);
margin-top: -webkit-calc(100% - 100px);
margin-top: -o-calc(100% - 100px);
margin-top: calc(100% - 100px);
}
Please let me know if this is what you needed. 如果需要的话，请告诉我。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.