如何让含object的div超指定高度时自适应伸展而非滚动

Hey there, let's figure out why your <object> tag isn't letting the parent .content div stretch properly, and how to fix it.

The Root Cause #

First off, <object> is a replaced element—its height calculation works differently than regular block elements. When you set .comm to height:100%, the browser needs a clear, explicit height on the parent .content div to use as a reference. But since .content has height:auto, that 100% doesn't have a valid value to inherit from. This leads to the object either using a default small height (causing the parent div to shrink when you tried height:auto) or forcing scrollbars when the content overflows.

Solutions to Try #

• Dynamic Height Adjustment with JavaScript
  The most reliable way is to use JavaScript to detect the actual height of the content loaded inside the <object> and set the object's height accordingly. Here's how to do it:

  First, add an onload handler to your object tag:

  <div class='content'>
    <p>...</p>
    <hr class="gh" style="margin-left:0px; margin-top:3px;">
    <object class="comm" data="comments.php?id=1" onload="adjustObjectHeight(this)"></object>
  </div>
  

  Then add this script (you can put it at the end of your HTML body or in a separate JS file):

  function adjustObjectHeight(obj) {
    // Check if we can access the content document (same origin only!)
    if (obj.contentDocument) {
      obj.style.height = obj.contentDocument.body.scrollHeight + 'px';
    } else if (obj.contentWindow) {
      // Fallback for older browsers
      obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
    }
  }
  

  Update your .comm CSS to let the height be controlled by the script:

  .comm {
    position: relative;
    width: 100%;
    height: auto; /* Let JS set the actual height */
    overflow: visible; /* Remove hidden to avoid cutting off content */
  }
  

  Note: This only works if comments.php is hosted on the same domain as your content.html—browser security rules block cross-origin access to the object's content document.

• Switch to <iframe> (Alternative)
  If you're open to using an <iframe> instead of <object>, it's a more commonly used element for embedding external content, and the height adjustment logic is nearly identical. Just replace your <object> tag with:

  <iframe class="comm" src="comments.php?id=1" onload="adjustObjectHeight(this)" frameborder="0"></iframe>
  

  The same JavaScript function will work here, and you can keep the updated .comm CSS from above.

• Fixed/Estimated Min-Height (Quick Fix)
  If the content in comments.php has a relatively consistent height, you can set a min-height on .comm to avoid scrollbars. For example:

  .comm {
    position: relative;
    width: 100%;
    min-height: 500px; /* Adjust this to match your typical content height */
    height: auto;
    overflow: visible;
  }
  

  This is less flexible but works if your comment section doesn't vary wildly in height.

Why Your Previous CSS Change Made the Div Smaller #

When you set .comm to min-height:100% with height:auto, since the parent .content has no explicit height, the browser can't calculate what 100% refers to. So the min-height rule gets ignored, and the <object> defaults to a tiny intrinsic height—this is why the parent div shrank.

Hope these solutions get your comment section stretching properly!

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