Why Height 100% sometimes doesn't work?

Question

As you can see I have 2 elements. Both of them have height 100% but one works and the other doesn't. Why?

Also, does anyone know how to put a background image in imageZone saying Preview here or an icon?

.dropzone {
  border: 2px dashed #ccc;
  width: 100%;
  height: 100%;
  text-align: center;
  padding: 120px 60px 60px 60px;
}

.dropzone span {
  font-size: 25px;
}

.dropzone.dragover {
  border-color: #000;
  color: #000;
  background-color: #eeeeee5c;
}

.dropzoneUser {
  padding: 60px !important;
}

.imageZone {
  border: 2px dashed #ccc;
  width: 100%;
  max-height: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="row">
  <label class="col-sm-2 control-label">Upload avatar <span data-toggle="tooltip" data-placement="right" title="Upload an avatar image for this user." class="fa fa-question-circle help-label"></span></label>
  <div class="col-sm-10">
    <div class="col-sm-8">
      <div class="dropzone dropzoneUser" id="dropzone">
        <span class="uploadIcon fa fa-upload"></span><br><br>
        <input type="file" name="fileUpload" accept="image/*" id="fileUpload" class="hide">
        <label for="fileUpload" id="uploadLabel" class="uploadLabel">Choose a file</label>
        <span>or drag & drop here</span>
      </div>
    </div>
    <div class="col-sm-4">
      <img id="previewImage" class="imageZone">
    </div>
  </div>
</div>

`height:100%` means 100% of the parent height so if no height set to parent container it won't work ... and none of them are working, the first one is simply expading to content height — Temani Afif, Feb 01 '18 at 10:37
to do what ? what you need to have ... simply ask yourself : 100% of what ? — Temani Afif, Feb 01 '18 at 10:40
if you make it full page there's a big problem here. If I put a big image. it will expand the row size. I want to make sure the size stays the same. — user9299353, Feb 01 '18 at 10:41
I just want to make them the same size. Should I use a fixed height in pixel? — user9299353, Feb 01 '18 at 10:42

Why Height 100% sometimes doesn't work?

0 Answers0