将宽度和高度设置为 div 百分比答案

【问题标题】：Set width and height to div as percent将宽度和高度设置为 div 百分比
【发布时间】：2017-04-15 12:29:33
【问题描述】：

共有三个divs，其中一个是父级，两个是子级。第一个孩子总是有 100px 的高度，第二个孩子有父母的其余高度，他们都有父母的宽度。我想用它来让我的父 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 的高度以百分比表示而第二个高度由常数值表示时它不起作用。谁能解释我的代码有什么问题以及为什么它不起作用？

【问题讨论】：

标签： javascript html css

【解决方案1】：

将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);
        }

如果这是您需要的，请告诉我。

【讨论】：