Not able to set height for div element

Question

I am making a chat web app and I want to set messages above the red line in the given image https://i.stack.imgur.com/M34xb.png.

my HTML is

    <div id="messages">
        <ul style="list-style-type:none;"> <!-- update msg here -->  </ul>
    </div>

    <div class="user-field">
        <input id="write-msg" type="text" placeholder="Type your message here....">
        <button class="send"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
    </div>

</div>

and related CSS is

.user-field{
    position: fixed;
    width: 50%;
    bottom: 10px;
    width: 100%;
    height: 7%;
    padding: 5px;
    background-color: rgb(207, 209, 208);
    margin: auto;
    display: inline-block;
}


#messages{
    background-color: rgb(207, 209, 208);
    overflow: scroll;
    height: 93%;
}

I tried hard to find but not getting something to fix it.

position: fixed ignores the DOM structure. Try to to make them as block elements and set the top container to overflow hidden or scroll.OR use flexbox on the parent of both elements and the direction to column. — Supportic, Oct 13 '20 at 07:15

score 1 · Accepted Answer · answered Oct 13 '20 at 07:17

If you want to set the height of a particular element in percentage(%), then the parent of the element must have a fixed height.

For example:

<div id="parent">
   <div id="messages">
      <ul style="list-style-type:none;"> <!-- update msg here -->  </ul>
   </div>

   <div class="user-field">
       <input id="write-msg" type="text" placeholder="Type your message here....">
       <button class="send"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
    </div>
</div>

CSS:

#parent {
   height: 500px;
}
.user-field{
  position: fixed;
  width: 50%;
  bottom: 10px;
  width: 100%;
  height: 7%;
  padding: 5px;
  background-color: rgb(207, 209, 208);
  margin: auto;
  display: inline-block;
}
#messages{
  background-color: rgb(207, 209, 208);
  overflow: scroll;
  height: 93%;
}

Then the div#messages height will be 93% of the height of its parent div#parent which is 500px;

adding height with js makes it responsive too. Thanks for your help. — bot guy, Oct 13 '20 at 07:49

score 1 · Answer 2 · answered Oct 13 '20 at 07:33

You need to define position property on message section.

*{
  box-sizing: border-box;
}
body{
  padding: 0;
  margin: 0;
}
.parent-wapper{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.user-field{
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 100%;
  height: 50px;
  padding: 5px;
  background-color: rgb(207, 209, 208);
  margin: auto;
  display: block;
  z-index: 2;
}
#messages{
  background-color: rgb(207, 209, 150);
  overflow: hidden;
  overflow-y: scroll;
  width: 100%;
  height: calc(100% - 50px - 10px); /*50px for char input section & 10px for set from bottom */
  position: absolute;
  left: 0;
  top: 0;
}

<div class="parent-wapper">
    <div id="messages">
      <ul style="list-style-type:none;"> <!-- update msg here -->
        <li>
            Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam,<br>
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.<br> Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non
            proident,<br> sunt in culpa qui officia deserunt mollit anim id est laborum.
        </li>
        <li>
            Lorem ipsum dolor sit amet,<br> consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua.<br> Ut enim ad minim veniam,<br>
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat.<br> Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur.<br> Excepteur sint occaecat cupidatat non
            proident,<br> sunt in culpa qui officia deserunt mollit anim id est laborum.
        </li>
      </ul>
    </div>
    <div class="user-field">
      <input id="write-msg" type="text" placeholder="Type your message here....">
      <button class="send"><i class="fa fa-paper-plane" aria-hidden="true"></i> Send</button>
    </div>
</div>

score 0 · Answer 3 · answered Oct 13 '20 at 07:16

Add style like this

.user-field {
  width: 50%;
  bottom: 10px;
  width: 100%;
  height: 7%;
  padding: 5px;
  background-color: rgb(207, 209, 208);
  margin: auto;
  display: inline-block;
}

#messages {
  background-color: rgb(207, 209, 208);
  overflow: scroll;
}

score 0 · Answer 4 · answered Oct 13 '20 at 07:23

I have used flex to create chat box and gave a parent div also modified some css . Please have a look.

.chatbox {
  width: 300px;
  display: flex;
  flex-direction: column;
  height: 300px;
  position: fixed;
  bottom: 0;
  right: 0;
}

.user-field {
  width: 100%;
  height: 50px;
  padding: 5px;
  background-color: rgb(207, 209, 208);
  margin: auto;
  display: flex;
  box-sizing: border-box;
}

.user-field input {
  width: 100%;
}

.user-field button {
  width: 50px;
}

#messages {
  background-color: rgb(207, 209, 208);
  overflow: auto;
  display: block;
  height: calc(100% - 50px);
}

<div class="chatbox">
  <div id="messages">
    <ul style="list-style-type:none;">
      <!-- update msg here -->
    </ul>
  </div>

  <div class="user-field">
    <input id="write-msg" type="text" placeholder="Type your message here....">
    <button class="send"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>
  </div>
</div>

nart · Answer 5 · 2020-10-13T08:12:51.327

you can use flex to style the chat, use flex-grow to expand the chat. Conditionally check current user and float it to the right use justify-content: flex-end and row-reverse so on. Reference this for appending a new message to the end of chat

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
  <style>
    .chat {
      height: 300px;
    }
    .message {
      width: fit-content;
    }
  </style>
</head>
<body class="bg-gray-900 p-3">
  <div class="chat flex flex-col rounded-md relative bg-white w-64 p-2">
    <div class="flex flex-col justify-end flex-1 overflow-hidden overflow-y-scroll">
      <div class="current-user my-1 justify-start flex-row-reverse flex items-center">
        <div class="w-6 h-6 ml-1 rounded-full border border-solid border-green-500 overflow-hidden">
          <img src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"/>
        </div>
        <span class="message bg-gray-800 rounded-full text-white text-sm px-2 py-1">message 1</span>
      </div>
      <div class="current-user my-1 justify-start flex items-center">
        <div class="w-6 h-6 mr-1 rounded-full border border-solid border-green-500 overflow-hidden">
          <img src="https://static.toiimg.com/thumb/msid-67586673,width-800,height-600,resizemode-75,imgsize-3918697,pt-32,y_pad-40/67586673.jpg"/>
        </div>
        <span class="message bg-gray-800 rounded-full text-white text-sm px-2 py-1">message 1</span>
      </div>
    </div>
    <div>
      <input placeholder="type something"
      class="rounded-full border border-solid border-gray-400 px-4 w-full py-1"/>
    </div>
  </div>
</body>
</html>

Not able to set height for div element

5 Answers5