Home/ Questions/Q 4041106
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T12:50:19+00:00

I have a problem with setting the height of the div: I have 3

  • 0

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. 2048×2048), 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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