0
divsの3つがあり、そのうちの1つは親で、2つは子です。最初の子は常に100ピクセルの高さを持ち、2番目の子は親の高さの残りの部分を持ち、両方とも親の幅を持ちます。私はそれを使用して親のdivを反応させる（フルスクリーン）ようにしたい。このタスクのための私のコードがあります：パーセントとしての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>
それは通常画面とし、フルスクリーンのように素晴らしい作品：
Iは、第1および第2の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の高さがパーセントであり、2番目の高さが定数値で表されている場合、なぜ機能しないのかわかりません。誰でも自分のコードに何が間違っているのか説明できますが、なぜ動作しませんか？