时间戳

首页 > 解决方案 > 最大高度不起作用，滚动显示但 div 越来越高

html - 最大高度不起作用，滚动显示但 div 越来越高

问题描述

我目前在我的样式表中遇到了 max-height 属性的问题，我有一个带有 '.background' 类的 div，其中元素是动态添加的，我将 div 的 max-height 和 height 设置为 80%；滚动显示如我所愿，但 div 没有保留它的最大高度，添加元素时仍然变得更高。

HTML

<!--Info Navigation, this is used to select what information the user wants to see.-->
<div class="info">
    <div class="info-tab tab-active"><p>General</p></div><div class="info-tab"><p>Appointments</p></div><div class="info-tab"><p>Exams</p></div><div class="info-tab"><p>Charges</p></div>
</div>

<div class="wrapper">
    <!-- General Information of the patient-->
    <div class="general-info">
        <div class="general">
            <h2>General</h2>
            <div class="title">General Information</div>
            <p>Id Card Number: {{patient.id_number}}</p>
            <p class="name">First Name: {{patient.first_names}}</p>
            <p class="name">Last Name: {{patient.last_names}}</p>
            <p>Gender: {{patient.get_gender_display}}</p>
            <p>Birthday: {{patient.birthday|date:"d M, Y"}}</p>
            <p>Age: {{patient.age}}</p>
            <p>Phone Number: {{patient.phone_number}}</p>
            <p>Email: {{patient.email}}</p>
            <p>Civil Status: {{patient.get_civil_status_display}}</p>
            <p>Origin: {{patient.get_origin_display}}</p>
            <p>Residence: {{patient.get_residence_display}}</p>
        </div>
        <div class="background">
            <h2>Background</h2>
            <div class="title">Allergies</div>
            {%if patient.allergies%}
                {%for allergy in patient.allergies.all%}
                    <p>{{forloop.counter}}. {{allergy.allergy_type}} - {{allergy.about}}</p>
                {%endfor%}
            {%endif%}
            <div class="title">Antecedents</div>
            {%if patient.antecedents%}
                {%for antecedent in patient.antecedents.all%}
                    <p>{{forloop.counter}}. {{antecedent.antecedent}} - {{antecedent.info}}</p>
                {%endfor%}
            {%endif%}
            <div class="title">Insurance</div>
            {%if patient.insurance%}
                <p>Insurance Carrier: {{patient.insurance.insurance_carrier}}</p>
                <p>Insurance Type: {{patient.insurance.insurance_type}}</p>
                <p>Expiration Date: {{patient.insurance.expiration_date}}</p>
            {%endif%}
        </div>
    </div>

CSS

/*##################################################### Body #########################################################*/

body{
    overflow: hidden;
}

#title{
    position: absolute;
}

/*##################################################### Wrapper ######################################################*/

.wrapper{
    display: grid;
    grid-template-columns: 100% 100% 100% 100%;
    grid-gap: 1%;
    margin-top: 6%;
}

.general-info{
    display: grid;
    grid-template-columns: 49.5% 49.5%;
    grid-gap: 1%;
    margin-top: 5%;
}

/*Div i am trying to set the maximun height to*/
.background{
    height: 80%;
    max-height: 80%;
    overflow-y: auto;
}

.general-info h2{
    margin-left: 45%;
}

.filterable{
    display: grid;
    grid-template-columns: 79% 20%;
    grid-gap: 1%;
}

.no-data{
    margin-left: 45%;
}

a{
    text-decoration: underline;
}

.title{
    padding: 10px;
    width: 95%;
    background-color: #6082AD;
    color: #FFFFFF;
    margin-top: 5%;
    left: 0;
}

标签： htmlcss

解决方案

简短的回答：它正在增长，因为您使用的是基于百分比的高度，并且未定义其父元素的高度，因此它们随着更多内容的添加而增长，因此它成为其父元素新高度的 80%。

根据您进行此布局设置的方式，我建议将主体的高度固定到视口body{height: 100vh}

然后.wrapper和.general-info元素都需要限制它们的高度，这样你的目标元素.background将被限制在你限制它们的80%。.wrapper（如果您只是限制，则不一定必须限制.general-info，但如果您使用所有百分比，则每个元素将始终为其父元素的 X%，并且如果没有父元素具有非基于百分比的高度元素将被允许增长，这将影响其余基于百分比的元素。） - 我希望这是有道理的。

您可以跳过大部分内容，只限制.background使用非百分比值，例如.background{max-height: 50vh}（视口高度的 50%）。

推荐阅读