html - 如何使面板的高度随位置相对增长

Question

这是我的问题:

PNlmain 是写入游客详细信息的主面板

pnlTouristInfo - 保存一位游客的数据。在系统中，您最多只能为三名游客进行预订 - 高度为 32%。 PnlMai 持有 pnlTouristsInfo。

pnlName 和 pnlCharges 包含游客姓名和费用的信息。它们填满了 pnlTouristInfo 的整个空间。

所以游客只能有一个名字 - 但他可以有很多费用 - 这就是为什么我有 pnlChargesItem。

问题是 - 如果游客支付了很多额外费用，如何使 pnlCharge 和 pnlName 增长。所以如果它们也增长 pnlTouristInfo 和 pnlMain 应该相对增长。另外，例如，如果游客只添加一次费用，我想保存 pnlTouristInfo

的 32% 的 min-height

对不起，这个问题，但我讨厌 css - 而且我是新手

    .pnlMain {
        width:90%;
        min-height:50%;
        height:50%;
        border-top:solid 3px blue;
        margin:auto;

    }

    .pnlTouristInfo {
        position:relative;
        width:99%;
        min-height:32%;
        height:32%;
        border: solid 2px RGB(204,204,204);
    }
    .pnlNames
    {       
        position:relative;
        width: 28.5%;
        height:99%;
        border-right :solid 0.8px RGB(204,204,204);

        float:left;
        text-align:left;

    }


    .pnlCharges {

        position:relative;
        width: 71%;
       height:99%;
        /*border:solid 1px RGB(204,204,204);*/
        float:right;

    }



   .pnlChargesItem {

        position:relative;
        width: 100%;
        height:auto;
        border-bottom:0.8px solid  RGB(204,204,204);
        text-align:left;
        float:left;

    }

    .pnlChargesName {
         position:relative;
        width: 84%;
        height:100%;
        border-right:0.8px solid  RGB(204,204,204);
        text-align:left;
        float:left;
    }
    .pnlChargesPrice {
         position:relative;
        width: 15%;
        height:100%;

        text-align:left;
        float:right;
    }

Answer 1

去掉 height 属性，只保留 min-height(浏览器对 % 属性在垂直位置的理解不同，所以不要用于 padding-top,padding-bottom,(min)-height,margin-top, margin-bottom 等 %)。