CODEWITHSUNDEEP
htmlcssresizeheight
user2212774
user2212774

Reputation: 215

resizing a div height between min and max sizes dynamically using CSS

I want to resize the height of a div using CSS. I want the content div to be a minimum of 420px in height, but if it is viewed on a larger screen and there is extra space, I would like the div to grow in height but to a maximum of 790px. I don't really know how to do this. 

#container {
    position:fixed !important;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    background-color:#F0F;
}
#container #menuBar {
    background-color:#03C;
    height:100px;
}
#container #content {
    min-height:420px;
        max-height:790px;
    background-color:#F00;
}
#container #clock {
    background-color:#0C0;
    height:100px;
}
</style>
</head>

<body>
<div id="container">
<div id="menuBar">menubar
</div>
<div id="content">content
</div>
<div id="clock">clock
</div>

</div>
</body>
</html>

Upvotes: 0

Views: 1554

Answers (2)

Jenny Thompson
Jenny Thompson

Reputation: 86

Min height always overwrites max-height, so you can't just use both.

This is kind of a hack, but you could do it with media queries. If this is your HTML:

<div id="myDiv"></div>

Then add this to your css:

    #myDiv{
        height:790px;    
    }
    @media screen and (max-height: 790px) {
        #myDiv {
            height:99vh; /*Set this with trial and error because it depends on your margins*/
        }
    }
    @media screen and (max-height: 420px) {
        #myDiv {
            height:420px;
        }
    }

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115066

Flexbox could do that...but I'm not sure of your use case. It seems to me you might have overflow issues.

Codepen Demo

However:

  #container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #F0F;
    display: flex;
    flex-direction: column;
  }
  #container #menuBar {
    background-color: #03C;
    height: 100px;
  }
  #container #content {
    flex: 1 0 120px;
    /* your min-height as flex-basis */
    max-height: 400px;
    /* your max-height */
    background-color: #F00;
  }
  #container #clock {
    background-color: #0C0;
  }
<div id="container">
  <div id="menuBar">menubar
  </div>
  <div id="content">content
  </div>
  <div id="clock">clock
  </div>

</div>

Upvotes: 1

Related Questions