javascript - 让 使用网站源获取 <iframe> 的高度？

Question

我正在尝试在餐厅的网站上显示菜单。最简单的方法是将他们使用的 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;
}

任何帮助将不胜感激!

Answer 1

我觉得这里的做法应该有所不同:

• 第一个选项:

而不是设置

overflow: hidden

在包含您的 iframe 上，您应该拉伸(stretch) iframe 以适应您的 div，只需尝试确保 div 足够长以处理最长的文档。

• 第二名

你可以使用 display: flex;对齐元素:strech；请参阅此处的引用资料:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• 第三名

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