固定大小的DIV超出限制

Question

一个超出CSS固定大小的div内部内容。

<style>
  #fixeddiv {
    position: fixed;
    margin: auto;
    max-height: 300px;
    max-width: 700px;
  }
</style>

<div id="fixeddiv">
  
  <div id="M775568ScriptRootC1273665"></div>
<script src="https://jsc.adskeeper.co.uk/c/r/creditkarma.gq.1253664.js" async>
</script>
</div>

固定区域内的内容应该在300像素高度和700像素宽度之间固定，但实际上却超出了这个范围，导致内容位置显示在固定尺寸外面。

编辑：子DIV中包含响应式本地广告，我试图通过父级DIV来固定其位置，因为我不能修改广告文案，以遵守广告网络政策。

- Stellan Coder

---

这个内容的类型是什么？是文本还是图片或其他什么？ - Arafat Ahmed

@ArafatAhmed 广告。在另一个 DIV 中，有一个 JavaScript 负责加载广告。 - Stellan Coder

使其位置相对 - Arafat Ahmed

@ArafatAhmed 内容仍超过“高度”。我已更新问题。 - Stellan Coder

Answer 1

<style>

#fixeddiv { 
    position: fixed;
    margin: auto;
    max-height: 300px;
    max-width: 700px; 
    width:100%;       
    height:100%;
}
  #someotherdiv {
    height:100%;
  }
</style>

<div id="fixeddiv">
<div id="someotherdiv"> contents </div> 
</div>

- Antoine CHEVALIER

---

目前你的回答不够清晰。请编辑并添加更多细节，以帮助其他人理解它如何回答所提出的问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

Answer 2

#fixeddiv > div{
   display: block;
   max-width: 100%;
   height: auto;
   vertical-align: top;
}

这取决于固定的div内部的内容。您还可以添加overflow:hidden，以便子内容不会溢出固定的div边界。

- n1kkou

---

它仍然超过了 max-height，右侧内容被移动到下面而不是适应其中。 - Stellan Coder

很可能，在广告内容的子元素中使用了绝对/强制流定位。如果不了解其中的CSS/结构，很难给出正确的答案。 - n1kkou

Answer 3

将width/height值应用于image而不是容器。

#fixeddiv {
  position: fixed;
  margin: auto;
  border: 20px solid;
}

img {
  max-height: 300px;
  max-width: 500px;
}

<div id="fixeddiv">
  <img src="https://pixy.org/src/20/201310.jpg">
</div>

- Rana

---

这不是一张普通的图片，而是一则广告，我无法编辑广告代码。 - Stellan Coder

@shanmugapradeep 是的，我已经阅读了那篇文章，但是只需将其应用于图像将显示的容器即可。就像这里的图像将在 img 标签中显示，所以我将其应用在那里。 - Rana