Creating divs that adapt to different screen sizes without relying on flexbox

Currently, I am in the process of developing a chat interface where the viewport height is set to 100vh. The layout consists of a header/navbar, a "main content" section, and a footer housing the input field (you can view the code here)

The way I have structured it now involves the main section receiving content from AJAX calls initiated through the input field in the footer. Once a sufficient number of messages are added, only this section becomes scrollable instead of the entire page.

I am seeking advice on how to replicate this functionality to also work smoothly in older legacy browsers, all while ensuring that the chat section expands to occupy the space between the header and footer without impacting the viewport height. My current CSS for the chat section utilizes flexbox and looks like this:

.chat-section {
    -ms-flex: 1;
    -moz-flex: 1;
    -o-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    background-color: #f8f8f8;
    border-top: 1px solid #A8A8AC;
    border-bottom: 1px solid #A8A8AC;
    overflow-y: scroll;
    overflow-x: hidden;
}
javascriptjqueryhtmlcssresponsive-design

Answer №1

To achieve this layout without relying on flexbox, you can utilize absolute positioning. While it may be less versatile since you need to specify the exact height of the footer/header, it is widely supported across different browsers:

.chat-section {
/*    -ms-flex: 1;
    -moz-flex: 1;
    -o-flex: 1;
    -webkit-flex: 1;
    flex: 1; */
    background-color: #f8f8f8;
    border-top: 1px solid #A8A8AC;
    border-bottom: 1px solid #A8A8AC;
    overflow-y: scroll;
    overflow-x: hidden;

    position: absolute;
    top: 57px;
    bottom: 100px;
    right:0px;
    left:0px;
}
footer {
    position: absolute;
    bottom: 0px;
}

You can check out my modified version of your fiddle here:

http://jsfiddle.net/nepwk8of/

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

Steps for setting up Node.js or npm on XAMPP

Hello there, I'm new to all of this so please bear with me if I make any mistakes. As a beginner developer, I am currently working on developing a web application locally using XAMPP. My plan is to eventually deploy it using a hosted web service. XAM ...

javascriptnode.jsapachenpmxampp

Adjust the path of an element as it decreases in size

Sorry for the weird title, but that's likely why I can't find the solution on my own. I'm experimenting with CSS animations and I want the form element to decrease in height from 100px -> 0, but I want it to collapse from the top to the ...

javascripthtmlcsscss-transitions

Array buffers are scheduled by BinaryJs and the Audio API

My node.js server is streaming some ArrayBuffers: var BinaryServer = require('binaryjs').BinaryServer; var fs = require('fs'); var server = BinaryServer({port: 2000}); server.on('connection', function(client){ var file = f ...

javascriptnode.jsaudio

Mapping through multiple items in a loop using Javascript

Typescript also functions Consider an array structured like this const elementList = ['one', 'two', 'three', 'four', 'five'] Now, suppose I want to generate components that appear as follows <div&g ...

javascriptreactjstypescriptecmascript-6

The text relentlessly presses the button within the confines of bootstrap

I am facing an issue with the alignment of the buttons in my HTML code. As the text inside the <p> tag grows, it pushes the button to the right. I want all the buttons to be positioned in the bottom-right corner of every div regardless of the text si ...

htmlcssbootstrap-4

Ways to display a jQuery datepicker when a button is clicked

I'm looking to display a datepicker only when a button is clicked <input type="button" id=day value="day" /> $("#day").datepicker(); The code above will populate the button text with the selected date I also attempted the following code, but ...

jqueryjquery-ui

Should one consider utilizing Ionic for creating a mobile web variant of a website?

Working for a Startup, we made the decision to create an adaptive website instead of a responsive one. This means that we serve different views for different devices in order to provide the best user experience for both mobile and desktop users. We are c ...

angularjshtmlmobilewebionic-framework

Webpack development server is not recognizing changes to the SCSS files

I successfully compressed and compiled my JavaScript and SCSS files using webpack. The SCSS file is extracted by the 'extract-text-webpack-plugin' into an external CSS file. Below is the code snippet: var path = require('path'); var we ...

javascriptnode.jssasswebpackwebpack-dev-server

Ways to retrieve the upcoming possible date

I'm currently working on a project using express and I need to implement a scheduling calendar. My goal is to provide users with the next available day in the format YYYY-MM-DD. Here are the rules for determining the next available day: The default ...

javascriptnode.js

Tips for removing a previous file from an 'input type' in HTML5 FileReader

Here is a file input with an associated function: <img id="uploadPreview"> <div id="changeImage">Change</div> <div id="customImage"> <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" / ...

javascripthtmljqueryfilereader

Is there a way to stream audio directly from a URL on the client-side using ASP.NET?

I am currently working on a web page for an ASP.NET application using .NET Framework Version 4.0 and ASP.NET Version 4.7. My goal is to incorporate audio playback from a server. The specific URL I am dealing with is as follows: . However, I am struggli ...

javascriptasp.nethtml5-audio

What is the best way to emphasize an element on a webpage with Selenium and Python?

Recently, I inherited an existing selenium framework that utilizes Python for scripting. In order to aid in debugging and other tasks, I am interested in implementing a feature that highlights the element currently being acted upon (such as an input box, l ...

javascriptpythonseleniumautomation

The console in React displays values, but fails to render them on the DOM

I am attempting to dynamically load options for a select element based on another select's value. I pull the data from an array that will eventually contain more information. The issue I am facing is that even though I successfully filter the data, t ...

javascriptreactjsantd

Exploring the Iteration of Ajax in ASP.NET MVC

I am trying to extract data from an object retrieved in my view through the use of $.getJSON. This object consists of several Lists that require iteration. Can someone please guide me on how this can be achieved? Here is the snippet I have so far: $.getJS ...

jqueryasp.netajaxjson

Issues with the navigation and logo design in bootstrap mode

1: How can I adjust the size of the logo and name in my Bootstrap navigation? 2: My navigation menu is not showing up correctly. Can anyone help me troubleshoot? https://i.sstatic.net/0pXya.jpg Navbar: <nav class="navbar navbar-expand-lg py-4 f ...

htmlcsstwitter-bootstrap

Tips for inserting an object into an array

Here's the data I received: { 0:{modifierId: 4, modifierName: 'Garlic', modifierPrice: 60 } 1:{modifierId: 1, modifierName: 'Tartar ', modifierPrice: 60} 2:{modifierId: 3, modifierName: 'Herb ', modifierPrice: 60} item ...

javascriptarraysangulartypescriptobject

The result of the $.post() request is back

In my current code, I am using a jQuery $.post function like this: $.post('/test', json_data, function(data) { result = data }); This function is being used in a validation process where the return value (data) contains either true or false ...

javascriptjqueryajaxpostreturn-value

Is it possible to simultaneously send a JSON object and render a template using NodeJS and AngularJS?

I'm currently facing issues with my API setup using NodeJS, ExpressJS Routing, and AngularJS. My goal is to render a template (ejs) while also sending a JSON object simultaneously. In the index.js file within my routes folder, I have the following s ...

javascriptangularjsnode.jsajaxexpress

What is the method to modify the background color of el-pagination?

I am using el-pagination on a dark page and I want to make its background color transparent. When I do not use the 'background' prop, the background color of el-pagination is white. Here is how it looks: (sorry I can't add an image) htt ...

javascriptvue.jselement

There seems to be an issue with the functionality of $apply in angular when used in conjunction with form

I've encountered an issue with my code where the form submission doesn't work properly unless I wait a few milliseconds before submitting. The problem seems to be related to setting the value of a hidden field called paymentToken. My goal is to ...

javascriptangularjsformsscopeangularjs-scope