Solved: bottom content going up when window in shrinked

HI,
I have a web application. In which there is a top part a middle and a bottom.
When i resize the browser window the bottom part also moves up and overlaps the middle part.
What i want is that the if i shrink the window height the bottom part should disappear and a scroll bar should appear rather than bottom part moving upward.

My html content :

 <body>
    <div id="top">
      <h1>Create Note</h1>
      <input type="text" id="title" placeholder="Title (Optional)" />
    </div>
    <div id="middle">
      <%@include file="quill.jsp" %>
    </div>
    <div id="bottom">
      <input type="text" id="message" placeholder="Add a Message (Optional)" />
      <div id="buttons">
        <button id="submit" disabled>Create Note</button>
        <button id="cancel">Cancel</button>
      </div>
    </div>
  </body>

Open in new window

Css :

@import url("base.css");

html {
    height: 100%;
}

body {
    height: 100%;
    font: normal 13px  "Lucida Grande", Arial, sans-serif;
    background: #f6f6f6;
    padding: 20px;
    margin: 0;
}

h1 {
    font-size: 1.5em;
    margin: 0 0 25px 0;
    padding: 0;
    border: 0;
}

input[type=text] {
    display: block;
    width: 100%;
    padding: 10px;
    font-size: 14px;
    background: #fff none repeat scroll 0% 0%;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
}

#middle {
    margin: 20px 0;
    height: calc(100% - 87px - 40px - 92px);
}

#buttons {
    margin-top: 18px;
    overflow: hidden;
}

#buttons :first-child {
    float: right;
}

#buttons :nth-child(2) {
    margin-right: 15px;
    float: right;
    padding: 10px 25px;
}

button  {
    background: rgba(10, 190, 81, 1);
    padding: 10px 25px;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 4px;
    outline: none;
}

button:disabled {
    background: rgba(10, 190, 81, 0.5);
    cursor: default;
}

#cancel {
    color: #696969;
    display: inline-block;
    cursor: pointer;
    background: none;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    outline: none;
}

Open in new window