Question

我要实现的功能是，当子元素的总高度超过父元素的高度时，包含无限数量子元素的父元素可以自动将其高度扩展到子元素的最远点。如果孩子的总身高不超过该身高，则父母的身高是固定的。这是示意图：

我已经尝试并搜索了几个小时，但仍然无法正常工作。不知道这里缺少什么。这是一个演示代码段，当您单击蓝色面板时，它将超过白色面板，但是白色面板不会相应地扩展。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <style>
    html,
    body {
      height: 100%;
      background-color: grey;
      margin: 0;
    }
    
    #left-panel {
      position: relative;
      width: 256px;
      height: 100%;
      background-color: white;
    }
    
    #child-panel {
      position: absolute;
      width: 30%;
      height: 40%;
      top: 20%;
      left: 30%;
      background-color: blue;
    }
  </style>
  <script>
    window.onload = init;

    function init() {
      var leftPanel = document.getElementById("left-panel");
      var childPanel = document.getElementById("child-panel");
      childPanel.onclick = function(ev) {
        if (childPanel.offsetHeight < leftPanel.offsetHeight) {
          childPanel.style.height = leftPanel.offsetHeight + 100 + "px";
          leftPanel.style.height = leftPanel.offsetHeight + 100 + "px";
        } else {
          childPanel.style.height = "40%";
          leftPanel.style.height = "100%";
        }
      }
    }
  </script>
</head>

<body>
  <div id="left-panel">
    <div id="child-panel"></div>
  </div>
</body>

</html>

Answer 1

这很简单，您不需要使用JavaScript即可获得正确的行为

首先，我使用此html和css代码在图片中提供与您相同的ui：

<div class="parent-purpel">
<div class="firstChild-yellow">

    <div class="thirdChild-orange">

    </div>
</div>

它给我以下结果：

然后我在CSS中使用flex：

.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto;
margin : 30px; 
display: flex;    /* <====================== */
flex-direction: column;    /* <======= to get orange squares in vertical align */}

重要！： 我们必须在黄色和Purdiv div中使用自动高度：

.parent-purpel{
background-color: purple;
width: 100%;
height: auto;  /*<===== important*/  }

.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto; /*<===== important*/
margin : 30px; 
display: flex;
flex-direction: column;}

现在，即使我们在黄色div中添加 orange 元素，我们也可以将div的高度更改为黄色和 purpel ，如下所示： 希望能对您有所帮助！

这是完整的代码：

html：test1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="test1.css">
    <title>Document</title>
</head>
<body>
    <div class="parent-purpel">
        <div class="firstChild-yellow">
            <div class="thirdChild-orange">

            </div>
            <div class="thirdChild-orange">    

            </div>
            <div class="thirdChild-orange">

            </div>
            <div class="thirdChild-orange">

            </div>
        </div>
    </div>

</body>
</html>

CSS：test1.css

.parent-purpel{
background-color: purple;
width: 100%;
height: auto;}

.firstChild-yellow{
background-color: yellow;
width: 30%;
height: auto;
margin : 30px; 
display: flex;
flex-direction: column;}

.thirdChild-orange{
background-color: orange;
width: 60%;
height: 200px;
margin: 30px;}

Answer 2

尝试这个：

var childTop = childPanel.offsetTop
if (childPanel.offsetHeight < leftPanel.offsetHeight) {
   childPanel.style.height = leftPanel.offsetHeight - childTop + "px";
   leftPanel.style.height = leftPanel.offsetHeight  + "px";
}

您将孩子的身高（cHeight）设置为父母的身高（pHeight），所以我们假设

pHeight = 100px;
cheight =您的情况下的pHeight childPanel.style.height = leftPanel.offsetHeight

这意味着两个元素的高度相同，但子元素也具有top: 20%;，您必须从子元素的高度上减小它。

计算孩子的最高成绩：var childTop = childPanel.offsetTop

然后从高处减小

childPanel.style.height = leftPanel.offsetHeight - childTop + "px";

Answer 3

你为什么不尝试类似的东西？

    <!-- min height will be the height that you want to keep fixed if lesser number of children -->
    <div style="border:1px solid black; padding:5px; min-height:50px"> 
        <div>
          Child 1
        </div>
        <div>
          Child 2
        </div>
        <div>
          Child 3
        </div>
        <div>
          Child 4
        </div>
    </div>

Answer 4

它是：

#child-panel {
   position: absolute;
}

导致该行为的位置，请使用填充和边距：

#left-panel {
    padding: 5% 2%;
}

#child-panel {
    margin: auto;
}

Answer 5

关键是要使用

min-height: 100%;
height: auto;

对于父面板，请勿使用

position: absolute;

用于子面板。如果要重新定位子面板，请使用包装面板。这是当您单击蓝色面板上的代码时，父面板和面板都将相应地扩展。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        html, body {
            height: 100%;
            background-color: grey;
            margin: 0;
        }

        #left-panel {
            width: 256px;
            min-height: 100%;
            height: auto;
            background-color: white;
        }

        .child-panel-wrapper {
            width: 30%;
            height: auto;
            background-color: yellow;
            position: relative;
            left: 30%;
        }

        .child-panel {
            background-color: blue;
            height: 200px;
        }
    </style>
    <script>
        window.onload = init;
        function init() {
            var childPanels = document.getElementsByClassName("child-panel");
            for (var i = 0; i < childPanels.length; i++) {
                var panel = childPanels[i];
                panel.addEventListener("click", function (evt) {
                    if (this.offsetHeight <= 200) {
                        this.style.height = 600 + "px";
                    } else {
                        this.style.height = 200 + "px";
                    }
                })
            }
        }
    </script>
</head>
<body>
<div id="left-panel">
    <div class="child-panel-wrapper">
        <div class="child-panel"></div><br>
        <div class="child-panel"></div><br>
        <div class="child-panel"></div>
    </div>
</div>
</body>
</html>

当孩子的总身高溢出时，如何自动扩展父母的身高？

5 个答案: