我们正在尝试创建电子邮件应用程序。我们在邮件正文 div 中遇到问题,它与 header div(包含 To/CC/Subject)重叠。在页面加载时,一切看起来都不错,但是当开始在“收件人”字段中添加电子邮件 ID 时,正文部分与标题重叠。
.MainDiv{
position: fixed;
width: 65%;
max-width: 890px;
height: 80%;
max-height: 1100px;
z-index: 1000 !important;
padding: 0px 0px 0px;
top: 10%;
left: 23%;
right: auto;
bottom: auto;
}
.Header{
clear: both;
margin: 0 5px 25px;
min-height: 100px;
display: block;
position: absolute;
width: 99%;
border: solid 1px green;
padding: 10px 20px 0px;
overflow: initial !important;{
}
.Body{
position: absolute;
border: solid 1px red;
top: 175px;
bottom: 72px;
width: 100%;
overflow-y: auto;
}
最佳答案
删除 position: absolute;
它导致了问题
.MainDiv{
position: relative;
width: 65%;
max-width: 890px;
height: 100%;
max-height: 1100px;
z-index: 1000 !important;
padding: 0px 0px 0px;
top: 10%;
left: 23%;
right: auto;
bottom: auto;
border: solid 1px black;
overflow-y : auto;
}
.Header{
clear: both;
min-height: 100px;
display: block;
width: 100%;
border: solid 1px green;
overflow: initial !important;
}
.Body{
border: solid 1px red;
width: 100%;
overflow-y: auto;
}
h2{
background-color:yellow;
}
h3{
background-color:teal;
}
<div class = "MainDiv" >
<div class ="Header" contenteditable="true">
<h2>
Header ygygyggyggygyyygyggygyyg yyfyffyyffyfyfy yfyfyfyfy gygygygygyyg yggygygyyggy gygyygygyyggygygygygy yggyygygyggyy uhuuuguug guuggugu
</h2>
</div>
<div class= "Body" contenteditable="true">
<h3>
Message Body
</h3>
</div>
</div>
关于html - 底部 div 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48060015/