CODEWITHSUNDEEP
htmlcss
Prashant Bhardwaj
Prashant Bhardwaj

Reputation: 68

Make div scroll above the Fixed position element

So I'm trying to make a making an IRC chat website

So this part shows the messages

No problem in it.

    <div class="container-fluid">
    <div class="row">
    <div class="col-md-12" >

    <div id="result" >

      <% msg.forEach((message) =>{ %>
        <h4>
          <%= message.name %>
          </h4>
           <p>
            <%= message.text %>
             </p>
          <% }) %>

          </div>
         </div>
       </div>
     </div>

Then I implemented the text input which will take the text as input for new message and fixed it to bottom.But problem is when no messages increase it take up whole page and latest new message are hide behind this search bar here is next part of ejs for search bar

<div class="container-fluid">
    <div class="row">
    <div class="col-md-12">
 <div class=style="position:fixed; width:100% ">
        <form action="/newMessage" method="POST">
          <div class="form-group">
            <input type="text" name="txtmsg" class="form-control">
            </div>
         </form>
    </div>
</div>
</div>
</div>
</div>

Even to add scroll above serach bar by using overflow:auto; in messages.

How can i implement it.

Upvotes: 0

Views: 60

Answers (2)

Fred Gandt
Fred Gandt

Reputation: 4312

Using calc()

You can see in the demo below that the two <div>s are relatively positioned with fixed heights.
The height of the upper <div> is calculated by calc() so that it and the lower <div> perfectly fill the height of the window.
The lower <div> will always be pushed to the bottom of the window, but never beyond it, and the upper <div> can have scrollable content added as needed.

body {
  margin: 0;
  overflow: hidden;
}
p {
  margin: .5rem .5rem 5rem;
}
#inbox {
  /* 100% of viewer height - height of lower div - combined widths of borders */
  height: calc( 100vh - 5rem - 8px );
  background: lightblue;
  border-bottom: 4px solid white;
  overflow: auto;
}
#outbox {
  height: 5rem;
  background: lightgreen;
  border-top: 4px solid black;
}
<div id="inbox"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></div>
<div id="outbox"></div>

Upvotes: 1

lit
lit

Reputation: 460

How about adding 100% to the body and bottom:0 to the fixed element?

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
  body {
    height: 100%;
  }
  .new-message {
    bottom:0;
    position: fixed;
  }
  </style>
</head>
<body>

  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12" >

        <div id="result" >

          <% msg.forEach((message) =>{ %>
          <h4>
            <%= message.name %>
          </h4>
          <p>
            <%= message.text %>
          </p>
          <% }) %>

        </div>
      </div>
      <div class="col-md-12 new-message">
        <form action="/newMessage" method="POST">
          <div class="form-group">
            <input type="text" name="txtmsg" class="form-control">
          </div>
         </form>
      </div>
    </div>
  </div>

</body>
</html>

Upvotes: 1

Related Questions