Div that can be scrolled, featuring a distinct header and footer

Looking for a chat template solution that includes a dynamic header (depending on the number of chat users) and a footer with a message textarea field. Struggling to find a method that works across all browsers, as using display: table only seems to work in webkit browsers, while firefox and IE ignore it. Check out this example. Is there a way to make this behavior compatible with all browsers, including webkit, firefox, and IE8+?

Unfortunately, flexboxes and calc property are not an option due to lack of support in older browsers.

htmlcss

Answer №1

*{margin:0;
  padding:0;
  }
body{
background:#fff; 
position:absolute; 
width:100%; 
height:100%;
}
.main{
background:#0C0;
height:100%; 
padding:60px 0 40px; 
box-sizing:border-box;
}
.header{
background: #0FC;
position:absolute; 
width:100%;
height:60px;
}
.left{
background:#3CC; 
float:left; 
width:250px; 
height:100%; 
overflow:scroll;
}
.right{
background:#9F3; 
height:100%; 
overflow:scroll;
}
.footer{
background:#9F9; 
position:absolute; 
bottom:0; 
width:100%; 
height:40px;
}
<div class="header"></div>
<div class="main">
    <div class="left">Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div>
    <div class="right">Lorem Ipsum is simply dummy text of the printing and typesetting industry. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</div>
</div>
<div class="footer"></div>

Answer №2

@TechieGuy

I may not fully grasp your inquiry, but I believe I am on the right track to finding a solution for you.

Check out the Live Solution Here

To resolve the issue, try utilizing this CSS code: 

.messages-wrapper .messages-panel #messages-form {
    display: table-row;
    height: auto;
    position: absolute;
    bottom: -15px;
    background: #F5F5F5;
    width: 100%;
}

Important Note: This solution is compatible with all major web browsers.

Answer №3

@TechSavvy

Check this out:

Your issue can be resolved with the help of a straightforward jQuery method. This method should work on all browsers, hopefully.

Preview here 

var windowHeight = $( window ).height();
var y = windowHeight - '40';
var x = windowHeight - '150';
  $('.conversations-list').css('max-height', y);

  $('.messages-container').css('max-height', x);

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

Why isn't the background image showing up on iOS devices when using the slider?

The website's background image displays on all devices such as laptops and Android phones, but not on iOS mobile devices. I even resized the image to 768px * 365px, but it still doesn't work. .bg-img { position: absolute; left: 0; ...

htmlcsstwitter-bootstrap-3bootstrap-4

Leveraging both text content and element positioning with Selenium's getattribute() method

I am in the process of creating a test framework using Selenium for a website that includes an ADF generated Tree. The structure of the tree resembles the following: <table> <tr> <td> <div> <span> <a id="AN_ID" t ...

javahtmlxpathselenium

HTML-Formatted Email Content

Similar Question: MailTo with HTML body I am looking to utilize JavaScript to send emails. I came across this helpful post: Sending emails with JavaScript. My goal is to include images, bold text, and color changes in the email content. Does anyone h ...

javascripthtmlemail

Issues with Google Chrome truncating the end of lengthy pages

While working on a website project, I encountered an issue with Chrome where loading a lengthy page results in a strange box covering the bottom portion of the content. Interestingly, the same pages appear fine on Safari and Firefox, indicating that the pr ...

htmlcssruby-on-railsgoogle-chrome

Strategies for reducing cyclomatic complexity in JavaScript

I am facing an issue with a code snippet that sets height based on certain conditions and devices. The error message indicates that the Cyclomatic complexity is too high (28). How can I go about resolving this problem? function adjustHeightForAttributes ...

javascriptcssangularjstwitter-bootstrap-3

H4 Heading in CSS/Bootstrap not aligning centrally

Having some trouble centering a <h4> title within a bootstrap modal. Here is the code snippet: <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="moda ...

cssbootstrap-4

Achieving full width for the elements in a row with Flexbox: A step-by-step guide

I am dealing with a flexbox grid that contains random width images: https://i.stack.imgur.com/pfPeU.jpg I want to stretch the elements in each row to full width to eliminate any white space - Is there a way to achieve this using CSS? justify-content do ...

cssflexbox

Issues with Media Queries on Desktop Devices

I've encountered an odd issue with my media queries. While they function properly on my mobile devices, resizing my desktop browser doesn't seem to trigger the changes. This prevents me from inspecting my mobile styles using web inspector/firebug ...

htmlcssmedia-queries

Maintain the alignment of content in the center while expanding background images

I am looking to create a website with a split background effect, similar to the design on this site . I want to maintain a content container width of 980px while achieving this look. I attempted to accomplish this by adding height and background color pro ...

htmlcssbackground-color

CSS animations are failing to work properly in Firefox due to a pseudo-element issue

I'm encountering a problem with my CSS animations in Firefox. Specifically, the animations are not working on a pseudo element (:after) while they work perfectly fine on other browsers. Below is where the animations are being applied: :after { d ...

htmlcssfirefoxanimation

Circular image displaying as an elongated oval in the latest version of Bootstrap

I am currently working on a project that involves creating circular avatar images within a Node Web App. The issue I am facing is when I apply the Boostrap class to the image like so: class="rounded-circle" The image ends up looking like an oval instead ...

htmlcssbootstrap-4

Listening to a variety of MP3 files

Last weekend, my dad asked me to transfer a few CDs to his digital library so he can listen to them anywhere. I was thinking of hosting the MP3 files on my server and creating a script that displays all the music files. He could then select one or multiple ...

html

Eliminating null values from arrays

Hello there! I'm currently working on inserting a list of locations into my database. $locations = array(); $locations = $_POST['loc']; $loc = implode(", ", $locations); However, when I insert the array into my database, the empt ...

phphtml

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...

javascriptjqueryhtmlcss

Troubleshooting Image Map Failure on Internet Explorer 10

<img src="images/imagemap.png" width="600" height="100" border="0" usemap="#map" /> <map name="map"> <!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Plea ...

htmlimagedictionaryinternet-explorer-10

The menu on Android gets cut off by the status bar

Seems like an easy fix, our menu is getting cut off by the status bar on certain Android devices as shown in this screenshot. Any suggestions on how to resolve this issue? Could it be related to z-index properties? https://i.sstatic.net/Jh5SZ.png ...

androidhtmlcssstatusbar

Positioning of textarea in CSS

As a CSS beginner, I am struggling to position the textarea on the right and the map on the left without the box covering the map. Here is the CSS I currently have: #CoordData { font-family: Arial, Helvetica, sans-serif; font-size: .9em; // pos ...

htmlcss

What is the method for showcasing an image stored in a Mysql database as a Medium Blob on my webpage?

After following instructions from the internet, I have implemented the following code in my HTML: <img src="imagescript.php?id=1"> Additionally, the imagescript.php file contains the following PHP code: <?php $servername="loc ...

phpmysqlhtmlimageblob

Only presenting the search results without revealing the entire table

My goal is to have the search results display only after clicking the search button on the webpage. Currently, the entire table appears while the page is loading, which is not ideal. If I make changes to the variable $sql by altering the query from "Select ...

phphtmlsql

Achieve full parent width with floated divs

My goal is to arrange 10 boxes horizontally on a webpage. Each box must have a minimum width of 150px and a maximum width of 299px. The challenge is to fit as many boxes as possible across the page without any gaps, ensuring that each box has an equal widt ...

htmlcssword-wrap