0
有三個divs，其中一個是父母，另外兩個是子女。第一個孩子總是有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: 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（恆定100像素應該在底部）：
<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的高度是百分比，第二個高度是由常量值表示。任何人都可以解釋我的代碼有什麼問題，爲什麼它不起作用？