Css 联系表7未在固定父div上展开

包含CF7的div是隐藏的，直到用户单击一个图标，然后在表单右下角用另一种颜色替换它的图标，所以我使用一个固定的div。问题是，当出现错误/成功消息时，元素会移动到表单（以及视口）之外，我需要表单展开以查看所有元素或解决方案

我的相关代码：

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

---

我最近不得不处理类似的事情。基本上，我编写了一个函数来根据无效触发器调整表单的高度

 $(".wpcf7").on('wpcf7:invalid', function(event){
   adjustHeight();
 });

对于adjustHeight（）函数，我为更宽的屏幕做了类似的操作

    function adjustHeight() {
       if ($(window).width() > 640){
         if ($('body').find('.wpcf7-response-output').hasClass('wpcf7-validation-errors')){
           $('body').find('.contact-container').css('height', '2500px');
         } else {
           $('body').find('.contact-container').css('height', '2200px');
         }
       }
    }

---

虽然不是最优雅的解决方案，但它确实有效。

最近我不得不处理类似的问题。基本上，我编写了一个函数来根据无效触发器调整表单的高度

 $(".wpcf7").on('wpcf7:invalid', function(event){
   adjustHeight();
 });

对于adjustHeight（）函数，我为更宽的屏幕做了类似的操作

    function adjustHeight() {
       if ($(window).width() > 640){
         if ($('body').find('.wpcf7-response-output').hasClass('wpcf7-validation-errors')){
           $('body').find('.contact-container').css('height', '2500px');
         } else {
           $('body').find('.contact-container').css('height', '2200px');
         }
       }
    }

---

虽然不是最优雅的解决方案，但它确实有效。

您需要使用最小高度更改高度，如下所示：

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

---

您需要使用min height更改高度，如下所示：

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

---

你在某处使用高度，试着用最小高度替换它是的！这就成功了，非常感谢。我编辑了我的问题以显示height属性。您正在某处使用height，请尝试将其替换为min heightYeah！这就成功了，非常感谢。我编辑我的问题来显示高度属性。这是复杂的，我认为，你可以考虑使用最小高度而不是高度，所以容器会自动调整，如果我记得，我这样做，以保持整体相似的外观，底部的形式，因为它被叠加在一个图像。这是复杂的，我想，你可以考虑使用最小高度而不是高度，这样容器会自动调整，如果我记得的话，我这样做是为了让整个形状看起来与图像的底部一样。