个人中心
gpt4 book ai didi

javascript - children总高度溢出时，如何自动扩展parent height？

转载 作者：太空宇宙 更新时间：2023-11-04 06:39:12 25 4
gpt4 key购买 nike

我要实现的功能是，一个包含无限个子元素的父元素，当子元素的总高度超过父元素的总高度时，可以自动将自己的高度延伸到子元素的最远点。如果 child 的总高度不超过该高度，则 parent 的高度是固定的。这是图表:

enter image description here

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

<!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>

最佳答案

很简单，你不需要 javascript 来获得正确的行为

  1. 首先我使用了这个 html 和 css 代码，它提供了与图片中相同的用户界面:

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

        <div class="thirdChild-orange">

        </div>
    </div>

它给了我下面的结果:enter image description here

然后我在 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 */}

重要! :我们必须在黄色和紫红色 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 yellow 和 purpel ，如下所示: enter image description here 希望对您有所帮助，谢谢!

完整代码如下:

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

关于javascript - children总高度溢出时，如何自动扩展parent height？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53955564/

25 4 0
文章推荐： python - 如何在 Windows 上导入 python26.zip
文章推荐： java - 未使用 CronTriggerFactoryBean 设置 CronTrigger 失火指令
文章推荐： c - Mico C 虚拟机分段故障
文章推荐： python - 什么样的 python 进程可以监控像 kestrel 或 rabbitmq 这样的排队系统？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com