嘿，这个问题我碰到过好多次——隐藏元素的样式设置经常因为浏览器的渲染机制“失效”，尤其是iframe这种特殊元素。咱们先搞懂核心原因：当iframe默认处于隐藏状态（比如设置了display: none）时，浏览器不会计算它的布局尺寸，你提前设置的min-height或者内联样式根本不会被应用。必须等iframe被显示出来之后，再去调整它的高度样式。

下面给你几个可行的JavaScript/jQuery方案：

方案一：在触发显示的点击事件后立即调整样式 #

假设你的触发元素ID是#show-typeform，iframe默认有个隐藏类.hidden（比如.hidden { display: none; }），可以这么写：

jQuery版本 #

$('#show-typeform').on('click', function() {
  // 先让iframe显示出来
  const typeformIframe = $('iframe[src*="typeform"]');
  typeformIframe.removeClass('hidden').show();
  
  // 给浏览器一点渲染时间，确保元素可见后再设置样式
  setTimeout(() => {
    typeformIframe.css({
      'border': '0px',
      'height': '1px',
      'min-height': '90%',
      'max-height': '100%',
      'max-width': '100%',
      'min-width': '100%',
      'width': '0px'
    });
  }, 10);
});

原生JavaScript版本 #

如果不想依赖jQuery，用原生JS也能实现：

const triggerBtn = document.getElementById('show-typeform');
const typeformIframe = document.querySelector('iframe[src*="typeform"]');

triggerBtn.addEventListener('click', function() {
  // 移除隐藏状态
  typeformIframe.classList.remove('hidden');
  typeformIframe.style.display = 'block';
  
  // 延迟设置样式，确保元素已完成渲染
  setTimeout(() => {
    Object.assign(typeformIframe.style, {
      border: '0px',
      height: '1px',
      minHeight: '90%',
      maxHeight: '100%',
      maxWidth: '100%',
      minWidth: '100%',
      width: '0px'
    });
  }, 10);
});

方案二：监听iframe加载事件（更稳妥） #

如果Typeform内容加载较慢，你可以等iframe完全加载后再调整高度，避免样式在内容未加载时设置失效：

jQuery版本 #

$('#show-typeform').on('click', function() {
  const typeformIframe = $('iframe[src*="typeform"]');
  typeformIframe.removeClass('hidden').show();
  
  // 监听iframe加载完成事件，只执行一次
  typeformIframe.one('load', function() {
    $(this).css({
      'border': '0px',
      'height': '1px',
      'min-height': '90%',
      'max-height': '100%',
      'max-width': '100%',
      'min-width': '100%',
      'width': '0px'
    });
  });
});

额外注意点 #

• 确保你的隐藏样式是用display: none，而不是visibility: hidden或者opacity: 0——后两种元素仍会占据布局空间，但display: none会让浏览器完全不渲染它的尺寸，这也是你之前代码无效的核心原因。
• 如果Typeform官方嵌入代码自带了优先级较高的样式，你可以临时用!important强制覆盖（不过尽量避免，优先通过调整设置时机来解决）。

内容的提问来源于stack exchange，提问作者Ahmed C