CODEWITHSUNDEEP
htmlcssresizeresponsive
anton980
anton980

Reputation: 41

Vertically resizing only 1 of 3 divs to fit window?

I'm trying to make a what should be a simple responsive page that consists of several divs as depicted below:

<div id="container"> maximum 1200 width and 1000 height
    <div id="vertically-static-top">20 pixes high</div>
    <div id="vertically-resizeable-middle">adjustable height</div>
    <div id="vertically-static-bottom">50 pixels high</div>
</div>

the overall max-width and max-height are 1200 and 1000 respectively

vertically-static divs must only resize horizontally if the browser window is resized, but vertically they need to always be fixed in height

vertically-resizeable div needs to adjust both its width and height based on the window dimensions.

For the life of me I cannot figure out how to get that middle div to resize vertically and keep everything inside the browser window!

Thank you so much!

Upvotes: 0

Views: 964

Answers (2)

Bhuwan
Bhuwan

Reputation: 16855

I think you have to use position absolute. Check below snippet.

html,
body {
  font: 13px Verdana;
  margin: 0;
  height: 100%;
}

#container {
  max-height: 1000px;
  max-width: 1200px;
  background: red;
  color: #fff;
  height: 100%;
  position: relative;
}

#vertically-static-top,
#vertically-static-bottom,
#vertically-resizeable-middle {
  position: absolute;
  left: 0;
  right: 0;
}

#vertically-static-top {
  height: 20px;
  top: 0;
  background: black;
}

#vertically-static-bottom {
  height: 50px;
  bottom: 0;
  background: black;
}

#vertically-resizeable-middle {
  top: 20px;
  bottom: 50px;
}
<div id="container">
  <div id="vertically-static-top">20 pixes high</div>
  <div id="vertically-resizeable-middle">adjustable height</div>
  <div id="vertically-static-bottom">50 pixels high</div>
</div>

I hope this will work.

Upvotes: 3

Sergey Sklyar
Sergey Sklyar

Reputation: 1970

This can be achieved with flexbox. Here is the sample code:

#container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical!important;
  -webkit-box-direction: normal!important;
  -ms-flex-direction: column!important;
  flex-direction: column!important;
  height: 240px;
  margin: auto;
  max-height: 1000px;
  max-width: 1200px;
}

#vertically-static-top,
#vertically-static-bottom {
  background-color: #80bdff;
  border-radius: .25rem;
  color: #fff;
  padding: 1rem;
}

#vertically-resizeable-middle {
  background-color: #957bbe;
  border-radius: .25rem;
  color: #fff;
  flex-grow: 1;
  padding: 1rem;
}
<div id="container"> maximum 1200 width and 1000 height
    <div id="vertically-static-top">20 pixes high</div>
    <div id="vertically-resizeable-middle">adjustable height</div>
    <div id="vertically-static-bottom">50 pixels high</div>
</div>

adjust the height of #container (height: 240px;) or put 100% instead to fit parent element's height

Upvotes: 2

Related Questions