0

Refer to this Fiddle.

I have a top-level div whose height is configured as one screen height (height:100vh). Within this div, there is a fixed-height (60px) child div and another child div I want to grow to fill the remaining height (so as to be responsive with different screen sizes).

This child div has an image and some text. Currently, its width is hard-coded, or else the image fills the entire screen (and exceeds the length of its parent). Setting height:100% (or even calc(100% - 60px)) doesn't scale the div as I'd hoped.

.one-page {
  min-height: 100vh;
  max-height: 100vh;
  background-color: #FF5555;
}

.fixed-size {
  height: 60px;
  border-style: solid;
}

.main-container {
  background-color: #55FF55;
  width: 300px;
  margin: auto;
}

.subtitle {
  text-align: center
}

.other {
  background-color: blue;
}

img {
  vertical-align: middle;
  width: 100%;
  height: auto;
}
<body>
  <div class="one-page">
    <div class="fixed-size">
      this div is a fixed size
    </div>
    <div class="main-container">
      <p>
        <img src="http://images.clipartpanda.com/square-clip-art-clipart-square-shield-256x256-e296.png">
      </p>
      <div class="subtitle">
        subtitle text
      </div>
    </div>
  </div>
  <div class="other">
    something else
  </div>
</body>
Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
MattDs17
  • 401
  • 1
  • 4
  • 20

2 Answers2

0

Try to use height:calc(100vh - 60px).

   .main-container {
    background-color: #ff00ff;
    width: 300px;
    margin: auto;
    padding:0;
    height:calc(100vh - 60px);
   }

DEMO

Suresh Ponnukalai
  • 13,820
  • 5
  • 34
  • 54
0

Use flexbox to work it out. Run the below snippet and you'll understand. flex-grow: 1 will basically give all the remaining height to the second child.

.p {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.c1 {
  height: 60px;
  background-color: green;
}

.c2 {
  flex-grow: 1;
  background-color: red;
}
<div class="p">
  <div class="c1"></div>
  <div class="c2"></div>
</div>
Abhinav Jain
  • 329
  • 1
  • 2
  • 9
  • This seems to be pretty close to what I'm looking for, but when I add an image it's still problematic. I'm trying to get the image to resize based on the available vertical space, but in this solution it stays fixed. It seems like I have to specify a width for it to change at all, but I want the width to be calculated based on the height. – MattDs17 Oct 11 '17 at 13:10
  • checkout this link: https://stackoverflow.com/questions/1891857/how-do-you-stretch-an-image-to-fill-a-div-while-keeping-the-images-aspect-rat – Abhinav Jain Oct 12 '17 at 05:37