一共有三个div，其中一个是parent，两个是child。第一个 child 的高度始终为 100px，第二个 child 的高度为父级的其余部分，两者的宽度均为父级的宽度。我想用它来使我的父 div 响应(全屏)。这个任务有我的代码:
<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>
它作为普通屏幕和全屏效果很好:
问题是当我尝试更改第一个和第二个 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>
结果是:
我不确定为什么当第一个 div 的高度以百分比表示而第二个高度由常量值表示时它不起作用。任何人都可以解释我的代码有什么问题以及为什么它不起作用吗？
最佳答案
将bottom:0px;添加到#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);
}
请告诉我这是否是您需要的。
关于javascript - 将宽度和高度设置为 div 的百分比，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43426070/