0

I have a full-screen page layout using two nested grids: header/main/footer, and then inside main is section/svg. This SVG in the middle of the nested grid I want to stretch to take up as much vertical space as possible. I'm using 100vh on the body and page container, and 1fr for the grid rows that should stretch.

Here's the whole thing in JSFiddle: https://jsfiddle.net/u4tomy9p/4/

HTML:

<html>
<body id="body">
  <div id="page">
    <header></header>
    <main id="main">
      <section id="contents">
        <div id="controls"></div>
        <svg id="diagram" viewBox="0 0 2000 2000">
          <!-- <g id="g"/> -->
        </svg>
      </section>
    </main>
    <footer></footer>
  </div>
</body>
</html>

CSS:

* {
  margin: 0;
  border: 0;
  padding: 0;
}

body {
  width: 100vw;
  height: 100vh;
}

#page {
  width: 100vw;
  height: 100vh;
  background: #777777;
  display: grid;
  grid-template-rows: 60px 1fr 30px;
  grid-template-areas:
    "header"
    "main"
    "footer";
}

header {
  grid-area: header;
  background-color: #6666ff;
}

main {
  grid-area: main;
  background-color: #ff6666;
  display: grid;
  grid-template-rows: 1fr;
  grid-template-areas: "mainComponent";
}

footer {
  grid-area: footer;
  background-color: #66ff66;
}

#contents {
  grid-area: mainComponent;
  background-color: #9999ff;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: 2rem 1fr;
  grid-template-areas: "controls" "diagram";
}

#controls {
  grid-area: controls;
  background-color: #ff9999;
}

#diagram {
  grid-area: diagram;
  background-color: #aaffaa;
  width: 100%;
  height: 100%;
}

Some JS just to help see what's happening with heights:

function heightOf(id) {
    console.log(id + ".height: " + document.getElementById(id).offsetHeight);
}

setTimeout(function() {
  heightOf("body");
  heightOf("page");
  heightOf("main");
  heightOf("contents");
  heightOf("diagram");
}, 250);

This works on Chrome (MacOS) - the layout takes up exactly the height of the screen and the SVG grows and shrinks as the window is resized - though I have to specify height:100% on the SVG, even though its height should be set by the grid layout.

On Firefox and Safari, it isn't working as expected, and instead the SVG is taking up a large amount of height (larger than the viewport height) which causes overflow.

Worth noting is that if the SVG is changed to a DIV instead, everything works as expected on all browsers, even without the 100% height on #diagram, so I think it's something specifically about the SVG element that is causing the issue.

What do I need to add to my CSS (and/or HTML) to constrain the size of the SVG to only take up the available vertical space without pushing the layout to take up more than the viewport height?

Graham Lea
  • 5,797
  • 3
  • 40
  • 55
  • min-height:0 to main and contents – Temani Afif Feb 26 '20 at 07:53
  • @TemaniAfif: Thanks for the reply. That fixes Firefox. In Safari, though, with height:100% on the SVG it makes it the height of the container, which is too large, but without any height specified it goes massive and overflows. I tried a div to contain the svg, and the div then respected the grid height but the svg's 100% height became bigger than the body!? Any ideas how to fix it for Safari? https://jsfiddle.net/ybaeLwfh/1/ – Graham Lea Feb 26 '20 at 12:51
  • try `max-height:100%` on the SVG – Temani Afif Feb 26 '20 at 14:57
  • Again, that made Chrome and Firefox work, but Safari sized the SVG to about 10px height. ‍♂️ Thanks for trying to help. I've redone the layout to use nested flexboxes instead of grids, and that has worked in all browsers once I put a `height="1"` on the SVG. – Graham Lea Feb 27 '20 at 22:33

0 Answers0