Setting the size of a div to 100% of browser window with bigger content in it_问答_开发者

Setting the size of a div to 100% of browser window with bigger content in it

开发者 https://www.devze.com 2023-02-16 05:07 出处：网络

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:

相关专题：css svg xhtml

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.

Try adding:

overflow:scroll;

To your CSS for div3.

JSFiddle

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