Container full height minus footer height-CodePudding

I have a JS-Draggable div that I'd like to be able to be dragged over the whole screen, minus the footer. Alternatively I'd also later like to be able to "full-size" the draggable object, allowing it to cover the whole screen minus the footer.

For that I am trying to make a content-wrapper of that size (whole screen - footer), however the attempts I tried to follow from other stackoverflow posts didn't seem to work.

Here is the code I have so far:

$( function() {
    $(".draggable").position({
        my: "center",
        at: "center",
        of: ".bg"
    })
    $( ".draggable" ).draggable({
        scroll: false,
        containment: ".container"
    });
  } );

body,html {
    font-family: Roboto;
    font-size: 18px;
    height: 100%;
    width: 100%;
    margin: 0;
}

.container {
    height: 100%;
    display: flex;
    width: 100%;
}

.bg {
  background-image: url("http://abload.de/img/background4mqdx.jpg");
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.footer {
   width: 100%;
  height: 40px;
  box-shadow: 0px 1px 0px 0px #C2C5CA inset, 0px 2px 0px 0px #FFF inset;
  background-color: #C2C5CA;
  position: absolute;
  left: 0;
  bottom: 0;
}

.draggable {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
}

<head>
    <!-- JavaScript -->
    <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>

    <div >
      <div >
      <div >
      content
      </div>
    </div>
  </div>
  
  <div >
  footer
  </div>
  
</body>

CodePudding user response：

Have you tried using:

.container {
  height: calc(100vh - 40px); // screen height - footer height
}