0

My page should have a navbar and an image below the navbar that fits in the remaining vertical height of the page. This is simple enough when the height of the navbar is fixed, because one can calculate the maximum image height given the navbar height:

* {
  margin: 0px;
}
#navbar {
  max-height: 50px;
  padding: 5px;
}

img {
    max-height: calc(100vh - 55px);
    max-width: 100%;
}
<div id="navbar">
   <h1>Navbar Contents</h1>
</div>
<img src="https://i.imgur.com/qtWpvMX.jpeg"/>

However, I don't want to have to manually set a height for my navbar, or have to manually adjust the calc expression every time that height changes. Another way that almost works is to set the max-height of the image to "inherit" but that only works when its parent height is known. I want to be able to let the height of my navbar to be set automatically based on what its contents are and for the image to fill the rest of the vertical space without overflowing it. How can I accomplish this?

Edit: I'm not sure how I could use CSS Flexbox while also limiting the height of the image to fit in the screen, because it overflows by default.

Edit 2: Here are a some examples from Make a div fill the height of the remaining screen space that don't work because those answers only work for text, or when having a scrollbar is acceptable

Using flexbox (top answer) 

html,
body {
  height: 100%;
  margin: 0;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row.header {
  flex: 0 1 auto;
}

.box .row.content {
  flex: 1 1 auto;
}

img {
  max-height: inherit;
}
<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <img src="https://i.imgur.com/qtWpvMX.jpeg">
  </div>
</div>

Second answer on page is my original example, which uses a fixed offset rather than a dynamic one. Third answer also uses manual sizing. Fourth answer uses a table, but the image still overflows:

*
{
    margin:0;padding:0;    
}
html,body
{
    height:100%;
    width:100%;
}
body
{
    display:table;
}
div
{
    width: 100%;
    display:table-row;

}
div+ div
{
    height:100%;  
}
<div>hello</div>
<div>
<img src="https://i.imgur.com/qtWpvMX.jpeg"/>
</div>

All of the other answers have similar flaws, so that link does not answer my question.

Luke Sedillo
  • 1
  • 1
  • 3
  • Have you looked at CSS flex? – A Haworth Jul 06 '21 at 18:50
  • @AHaworth yes but I could not figure out how to limit the height of the image to fit with flexbox. – Luke Sedillo Jul 06 '21 at 19:00
  • By fit the screen, do you mean you just want the header and what I assume will be a hero image to collectively always be 100% of the viewport height regardless of resolution / device? – Chris W. Jul 06 '21 at 19:03
  • @ChrisW. The page is meant to browse an image gallery of sorts, so the header contains the controls and the image is the point of the entire page. – Luke Sedillo Jul 06 '21 at 19:13

0 Answers0