使 <div> 具有网站源的 <iframe> 高度？答案

【问题标题】：Make <div> take the height of an <iframe> with a website source?使 <div> 具有网站源的 <iframe> 高度？
【发布时间】：2017-08-12 05:43:48
【问题描述】：

我正在尝试在餐厅的网站上显示菜单。最简单的方法是将他们使用的 Word 文档保存为网页，然后将其加载到网站中。我不希望有一个固定的像素高度，因为菜单每天都在变化，文档的高度也是如此。听起来很简单，但我就是无法摆脱滚动条！

我已经尝试了溢出：隐藏，显示：阻止和清除：两者的所有组合，但似乎没有任何效果。

这是 HTML：

   <div class="col-sm-6 col-md-4 col-lg-4 specials">
    <div class="container">
     <div class="row">
      <div class="menu-section">
       <embed src="Menu/lSpecials.htm" width="100%"></embed>
      </div>
     <div class="col-xs-12 col-sm-6">
       <div class="menu-section">
        <embed src="Menu/lunch1.htm" width="100%"></embed>
       </div>
      </div>
       <div class="col-xs-12 col-sm-6">
        <div class="menu-section">
         <embed src="Menu/lunch2.htm" width="100%"></embed>
        </div>
       </div>
      </div>
     </div>

还有 CSS：

    #restaurant-menu .menu-section {
    margin: 0 20px 20px;
    display:block;
}

任何帮助将不胜感激！

【问题讨论】：

可能重复stackoverflow.com/questions/5589756/…
你能展示一张你想要的样子吗？

标签： javascript jquery html css embed

【解决方案1】：

我认为这里的方法应该不同：

第一个选项：

而不是设置

overflow: hidden

在包含您的 iframe 的情况下，您应该拉伸 iframe 以适合您的 div，只需尝试确保 div 足够长以处理最长的文档。

第二次

你可以使用 display: flex;对齐项目：拉伸；请参阅此处的参考：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

第三次

根据您的设计，将溢出设置为可见，只需确保其底部有良好的边距即可。

【讨论】：