Question

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

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

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

将宽度和高度设置为div

1 个答案: