将 div 的大小设置为浏览器窗口的 100%，其中包含更大的内容答案

【问题标题】：Setting the size of a div to 100% of browser window with bigger content in it将 div 的大小设置为浏览器窗口的 100%，其中包含更大的内容
【发布时间】：2011-07-11 20:04:12
【问题描述】：

我在设置 div 的高度时遇到问题：我有 3 个 div 和 svg 元素以这种方式相互连接：

<body>
  <div id="1">
    <div id="2">
      <div id="3">
        <svg></svg>
      </div>
    </div>
   </div>
</body>

（div 1 和 2 中还有其他元素）

假设 svg 非常大（即 2048x2048），我需要 div3 的大小（这也意味着 div2 和 div1）的大小为浏览器窗口的 100%（减去上部 div 中的其他元素和边距） - 当浏览器调整 div 也应该。由于 scg 比 div3 大，因此 div3 中应该有一个滚动条（滚动条应该在 div3 中而不是在整个浏览器窗口中，以仅滚动 div3（svg 元素）的内容而不是整个浏览器内容！）。

我已经设法使它在宽度上以这种方式工作，但在高度上却不行，当我将除 svg 之外的所有元素的高度（也用于正文）设置为 100% 时，我在某处找到（也尝试使用 min-height），然后所有 div 的高度均为 svg 并且滚动条在浏览器窗口上出现，滚动整个页面。

【问题讨论】：

标签： html css xhtml svg

【解决方案1】：

尝试添加：

overflow:scroll;

到您的 div3 的 CSS。

JSFiddle

【讨论】：

我已经这样做了，但它只是让滚动条可见但不活跃，因为 div3 的高度仍然是 2048px，而不是浏览器窗口高度......
不，我需要 div3 具有浏览器窗口的大小，并有滚动条来滚动其中较大的 svg。示例：div3 的每个尺寸的边距设置为 10px，用户调整浏览器的大小使内容窗口为 100x100，我希望 div3 的尺寸为 80x80，在其中我需要滚动条来滚动 svg（尺寸为 2048x2048）跨度>
啊，我没有注意到指向 JSFidle 的链接，是的，这是我需要的效果，但问题是这里你有固定的宽度和高度，我正在寻找一种方法来设置高度相对于浏览器窗口的大小（即 80%）

【解决方案2】：

对于任何对类似案例感兴趣的人，我设法做到了这一点。我已经放弃使用 div3（毕竟不需要它），所以页面布局与此类似：

<div id="1">
 something          
 <div id="2">
  <svg width='2048' height='2048' ></svg>
 </div>
 <div id="footer">something</div>
</div>

而css是：

body, html, {
padding : 0px;
margin : 0px;
width : 100%;
height : 100%;
} 
#nr2{
overflow: scroll;
position: absolute;
top: 10px; /* must be the height of everything above div */
left: 0px;
right: 0px;
bottom: 10px; /* must be the height of footer */
}
#footer{
height: 10px;
position: fixed;
bottom: 0px;
}

【讨论】：

在我的回答中查看新的 JSFiddle :)
是的，这也可以，但是这个解决方案是没有任何js的。它可能无法在 IE 上运行，但 IE 不支持 svg 并且我为它制作了完全不同的版本