将宽度和高度设置为百分比

问题描述：

有三个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的高度是百分比，第二个高度是由常量值表示。任何人都可以解释我的代码有什么问题，为什么它不起作用？

答

添加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); 
     }

请让我知道，如果这是你需要的东西。

将宽度和高度设置为百分比

相关推荐