Make <div> take the height of an <iframe> with a website source?

Question

I am trying to display menus on a restaurant's website. The easiest way was to save the word documents they use as a WebPage and that load that into an into the website. I dont want the to have a fixed height in pixels since the menu changes everyday and so does the height of the document. Sounds easy enough but I just cannot get rid of the scroll bars!

I've tried everything and every combination of overflow:hidden, display:block and clear:both but nothing seems to work.

Here is the 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>

And the CSS:

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

Any help will be greatly appreciated!

Answer 1

I think the approach here should be different:

• 1st option:

instead of setting

overflow: hidden

on a containing your iframe, you should stretch the iframe to fit in your div, just try to make sure the div is long enough to handle even the longest document.

• 2nd

You can use display: flex; align-items: strech; See the reference here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

• 3rd

Set overflow of your to visible, depending on your design, just make sure it has nice margin on the bottom.