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

发布于 2024-10-21 01:08:00 字数 655 浏览 0 评论 0原文

我在设置 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 （也适用于 body）之外的所有元素的高度设置为 100% 时，正如我在某处发现的那样（也尝试使用 min-height），那么所有 div 的高度都是 svg 的，并且滚动条会出现在浏览器窗口上，滚动整个页面。

原文

I have a problem with setting the height of the div:
I have 3 divs and svg element one in each other in such way:

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

(There are also other elements in div 1 and 2)

Assume that svg is very big (i.e. 2048x2048), I need that size of div3 (and this also would mean div2 and div1) to have size 100% of browser window (minus other elements and margins in uppers divs) - when a browser resize div also should. As the scg is bigger than div3 there should be a scrollbars in div3 (scrollbars should be in div3 not in whole browser window to scroll only content of div3 (the svg element) not of the whole browser content!).

I've already manage to make it works this way in width, but not in height,
when I set height of all elements except svg (also for body) to 100% as I found somewhere (also tried with min-height), then all divs are of height of svg and scrollbars apears on browser window, scrolling the whole page.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

北方的巷 2024-10-28 01:08:00

尝试添加：

overflow:scroll;

到 div3 的 CSS 中。

JSFiddle

Try adding:

overflow:scroll;

To your CSS for div3.

JSFiddle

回复收藏 0 原文

淡莣 2024-10-28 01:08:00

对于任何对类似案例感兴趣的人，我设法做到了这一点。我已经放弃使用 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;
}

For any one interested in similiar case I managed to done this. I've resigined of using div3 (after all it wasnt needed) so the layout of page is smiliar to this:

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

and css is:

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;
}

回复收藏 0 原文

~没有更多了~