0

This seems to be such a popular question on SO, and there are many answers to many specific situations, but unbelievably none of these solutions apply for my situation, so I am going to ask yet another "how to fill remaining vertical space with css" question.

The problem I have is that I need the height of my container to not depend in any way on its content, just fill up all of the remaining vertical space exactly. In all of the other solution I read on SO, the container will grow vertically if the content is larger, and introduce overflow or scroll bars.

I can't set the height to 100% because there is a responsive fixed height header above it.

The reason that I need the container to determine its height without regard for its content is that I am generating an SVG that is the size of the container, and if the container also resizes to the content this creates a situation where the SVG just gets larger and larger if the browser window is resized.

In theory I could set the SVG size taking into account all the other element sizes, margins etc, but this is hard to do because this is a react application and components should not need to be aware of what else is on the page.

This is the closest I got so far to a working solution:

div {
  margin: 5px;
}

.outer {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

.header {
  min-height: 64px;
  border: 1px solid blue;
}

.container {
  flex: 1;
  border: 1px solid green;
}

.drawing {
  height: 100%;
  width: 100%;
}
<div class="outer">
  <div class="header">Fixed height header</div>
  <div class="container">
    <div class="drawing">
      <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg" height="1000">
    </div>
  </div>
  </div

If you run this code, you will see that the container div resizes vertically to the size of the image, but I need it to exactly fill the browser window.

If I reduce the height of the image then the container does fill up all remaining vertical space, but when the image gets larger, the container starts going below the fold.

Johannes
  • 64,305
  • 18
  • 73
  • 130
bikeman868
  • 2,236
  • 23
  • 30
  • You can use `overflow: auto` on the container to make it stay its size. Or use `height: 100%` on the image to fit it to the container. – bowlowl Dec 01 '20 at 01:05
  • Is this what you're looking for? https://jsfiddle.net/ayL6qcv3/ – John Dec 01 '20 at 01:07
  • The `height: 100%` doesn't help in this case because I am creating the SVG in code to be the same size as the container. The problem is that margins, padding etc cause the container to expand, which expands the image etc. – bikeman868 Dec 01 '20 at 18:29
  • John, your JS fiddle works if you know the size of the header. In my simple illustration above I set the height to 64px, but in my application this is not known a) because its responsive and b) because this is a react component and can be placed on any page. – bikeman868 Dec 01 '20 at 18:31
  • Thanks @bowlowl adding `overflow:hidden` to the container fixes the problem. – bikeman868 Dec 01 '20 at 18:35

0 Answers0