Structured chat interface with unchanging top and bottom sections

I'm currently trying to come up with a way to structure my chatbox so that it has a fixed header at the top and a fixed footer at the bottom, while allowing the chatbox body to scroll within those constraints. I've experimented with various approaches but haven't quite achieved the clean layout I desire.

.chat-head  {    
    background: red;
    position: fixed;
    top: 0;
    width:100%;
}
.chat-body  {
    position: relative;
    overflow-y: scroll;
    height: 93vh;
    margin: 25px 0;
    background:green;
}
.chat-foot {    
    background: blue;
    position: fixed;
    bottom: 0;
    width:100%;
}
<div class="col chat-head">
  One of three columns
</div>
  <div class="w-100 d-none d-md-block"></div>
<div class="col chat-body">chat<br>chat<br>chat<br>chat<br>...

View my JSFiddle for a live example: https://jsfiddle.net/aLysfspo/1/

htmlcss

Answer №1

To create a structured layout, include a .container with the following properties:

  1. padding-top should equal the height of the fixed header;
  2. padding-bottom should equal the height of the fixed footer;
  3. Ensure to reset all DOM nodes' margin and padding.

View the snippet below or visit this updated version on JSFiddle to see if it meets your requirements.

* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  padding-top: 10vh;
  padding-bottom: 10vh;
  box-sizing: border-box;
}

.chat-head {
  background: red;
  position: fixed;
  top: 0;
  width: 100%;
  height: 10vh;
}

.chat-body {
  position: relative;
  overflow-y: scroll;
  height: 80vh;
  background: green;
}

.chat-foot {
  background: blue;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 10vh;
}
<div class="container">
  <div class="col chat-head">
    One of three columns
  </div>
  <div class="w-100 d-none d-md-block"></div>
  <div class="col chat-body">
    chat content...
  </div>
  <div class="w-100 d-none d-md-block"></div>
  <div class="col chat-foot">
    One of three columns
  </div>
</div>

Answer №2

It's important to keep in mind the usage of Bootstrap when working on this project. To maximize the benefits of using the framework, it's recommended to minimize the amount of custom CSS you write. Excessive custom styling could potentially interfere with the built-in features of Bootstrap, such as responsiveness.

To demonstrate, I've revised your code utilizing the Card Component and a spacing utility class. By incorporating the card component along with sections for header, body, and footer, I was able to achieve the desired layout without compromising core Bootstrap functionality. The addition of the spacing utility class py-0 ensured proper padding adjustments within the body section.

.chat .card-header {
  background: red;
}

.chat .card-body {  
  overflow-y: scroll;
  height: 50vh;
  background: green;
}

.chat .card-footer {
  background: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card chat">
  <div class="card-header">
    One of three columns
  </div>
  <div class="card-body py-0">
    chat content here...
  </div>
  <div class="card-footer">
    One of three columns
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for horizontally aligning an item in a flexbox only when it wraps onto a new line

In my layout, I have a container that consists of text on the left and a button on the right. The challenge I'm facing is ensuring proper alignment when they are on the same line versus when the button wraps to a new line on smaller screens. Ideally, ...

htmlcssflexbox

Creating a visually appealing user interface can be achieved by utilizing HTML/CSS to include bullet points and enumeration numbers in the page

I am looking for a way to display lists in a document with a style similar to the image on the right below: The text content of the list items is formatted like any other <p> and the bullet points are located in the margin. Is there a CSS solution ...

htmlcss

Use VueJS v-on:click and Vanilla JS to collapse various divs when clicked

Can VueJS and vanilla JS be used to collapse specific divs among many? I have information contained in separate card elements that include a title and a body. My goal is to make the body of each card expand or collapse when the respective title is clicked ...

javascripthtmlcssvue.js

What is the best way to determine the position of an element with text content

Currently facing an issue with positioning in my project. Attached is a snapshot of my desired layout. I've tried creating a starburst effect and adding text using this code: jsfiddle link, but I'm struggling to position the elements correctly ...

htmlcss

What could be causing my website icon to not appear?

I'm having trouble displaying my website icon after uploading it to Favic-o Matic's Website and implementing the HTML code I received. Despite trying various troubleshooting steps, such as clearing the cache and saving the site as a bookmark, the ...

htmlamazon-ec2iconsfavicon

JavaScript progress bar with extended duration, inspired by the success-oriented approach

Currently, I am in search of a unique solution or plugin that can replicate the same effect as Kickstarter's crowd fund long term progression bar. It seems like existing solutions only offer short term dynamic progress bars that indicate the percentag ...

javascriptjquerycssjquery-ui

Troubleshooting Navigation Bar Toggle Button Issue in Bootstrap 5

Currently, I am in the process of working on a web project that requires the implementation of a responsive sidebar. This sidebar should be toggleable using a button located in the navigation bar. My choice for the layout is Bootstrap, and I have come acr ...

javascriptcssbootstrap-5

Is the table scrollable within the tbody tag?

Is it possible to create a table with a scrollbar on the right side using only CSS and without any plugins like jQuery? Additionally, I want the table header to remain fixed in place. What steps do I need to take to achieve this functionality? ...

htmlcssscroll

Rectangles on canvas, each with identical dimensions, appear in varying sizes when positioned at different locations

In my canvas, I have created two rectangles using the rect element. Both rectangles are supposed to be 40 units wide and 20 units tall. The first rectangle starts at coordinates 0,0 for its top-left corner, while the second one begins at 60,40. Interesti ...

javascripthtmlhtml5-canvas

Ensure YouTube iframe remains visible above all other elements on mobile devices at all times

Currently, my method involves utilizing YouTube for embedding videos and incorporating certain elements that should display on top of the video when clicked on. Regrettably, this functionality operates flawlessly on desktop browsers but encounters issues ...

htmlflashyoutubehtml5-video

When using the "Content-Disposition" header with the value "inline;filename=" + fileName, it does not necessarily guarantee that PDF files will be displayed directly

When a link is clicked, I want the PDF file to first show in a new tab as a preview before allowing users to download it. I researched and found advice suggesting that including these two headers would achieve this: Response.AddHeader("Content-Dispositio ...

javascriptc#htmlangularjsasp.net-mvc

Manipulate jQuery to set the table row containing empty table data cells to be lower than the row with

I am using HTML and jQuery to sort my table, including non-standard sorting with multi-tbody. The issue I am facing is that the prices (Цена) in the td are sorted ascending but not correctly. Why is this happening? Additionally, I need to move the tr&a ...

javascriptjqueryhtml

Place a gap at a specific spot within the boundary line

Here is a CSS code snippet that displays a horizontal line: .horizontalLineBottom { border-bottom:solid #6E6A6B; border-width:1px; } Is it possible to add space at a specific position on this line? For example, _________________________________ ...

javascriptjquerycss

Adjust the fixed navbar position in MaterializeCSS as you scroll

First of all, I apologize for my limited proficiency in English. I have a website with a company logo at the top and a navigation bar below it. My goal is to change the position of the navigation bar to the top when scrolling past the company logo. I att ...

javascripthtmlmaterial-designmaterialize

Having trouble identifying the CSS style being applied to a specific element

In this image, a red border is seen on the input fields indicating an error with some CSS style being applied. Despite this, it is difficult to determine which CSS selector is causing this as Firebug does not reveal any applied styles. https://i.stack.img ...

htmlcssfirefoxfirebug

Tips for creating a responsive <hr> tag

Help needed with adjusting the horizontal line tag on a webpage created using HTML, CSS, and Bootstrap. The issue arises when the window size changes to extra small. Initially, the hr tag was set to 400px, which looked great on full-screen view. However, ...

htmlcssresponsive-designbootstrap-4

Arrange two <p> elements in a horizontal alignment

How can I align two <p> elements on the same line? I am trying to align both <p> elements on the same line, one to the left and the other to the right. <p style="text-align:left">Copyright &copy; {$date_year} {$companyname}. All R ...

html

Tips for creating responsive scrollable columns in an HTML table with Bootstrap

I'm not a professional web designer. I attempted to create a web layout with scrollable columns containing data in anchor tags that are loaded dynamically. To achieve this, I created an HTML table structure along with a stylesheet. Here is the source ...

htmlcssangularjstwitter-bootstrap

Exploring the engaging section of interconnected images featuring rounded edges

I'm currently working on a unique widget that can be found at this link: http://codepen.io/JonnyNineToes/pen/zGYxwV This widget features an image that reveals additional information when clicked, with the extra info sliding out from behind the image. ...

htmlcsscss-shapes

Utilizing Gulp variables to create dynamic destination file names?

As a newcomer to gulp, I am curious about the feasibility of achieving my desired outcome. Here is the structure of my projects: root | components | | | component_1 | | styles.scss | | actions.js | | template.html | | ... | componen ...

javascriptcsssassgulp