css - 联系表 7 未在固定的父 div 上扩展

Question

包含 CF7 的 div 是隐藏的，直到用户单击一个图标，然后在表单的右下角将图标替换为另一种颜色，所以我为此使用了一个固定的 div。问题是，当出现错误/成功消息时，元素移出表单(和视口(viewport))，我需要展开表单才能看到所有元素或解决方案。

My CF7

My CF7 after an error/success message

我的相关代码:

/*Div for the CF7*/
#div-mail {
display: none;
position: fixed;
bottom: 4%;
right: 3%;
}

.wpcf7-form {
margin: 30px 30px 30px 30px;
width: 350px;
height: 286px;
}

/*First icon*/
#img-mail {
position: fixed;
bottom: 3%;
right: 3%;
cursor: pointer;
}

/*second icon*/
#img-mail-active {
position: fixed;
bottom: 3%;
right: 3%;
cursor: pointer;
display: none;
z-index: 1;
}

Answer 1

你需要像这样用 min-height 改变 height :

.wpcf7-form {
    margin: 30px 30px 30px 30px;
    width: 350px;
    min-height: 286px;
}