Styling with CSS to create a layout similar to Facebook Messages

I am attempting to design a web layout similar to Facebook's Messages page, with a fixed height header and footer, and a flexible height main element.

Within the main element, there needs to be:

  1. A div (100% height of the main elem.) that is scrollable when overflow occurs
  2. A div (100% height of the main elem. minus the div below) that is also scrollable when overflow happens
  3. A div with a fixed height below the second one, positioned at the bottom of the main elem.

https://i.sstatic.net/qK7bN.png

I have created a basic layout using flexbox, but I'm unsure about those specific divs.

Here is a pen: http://codepen.io/anon/pen/GJLOrL?editors=110

Apologies for any language errors

enter code here
htmlcssflexboxscrollable

Answer №1

Just for the sake of mental stimulation... flexbox

html {
  height: 100%;
}
body {
  height: 100%;
  margin:0;
  padding:0;
}
.wrapper {
  height: 100%;
  background: PaleGoldenrod;
  display: flex;
  flex-direction: column;
}
header,
footer {
  background: lightgrey;
  flex: 0 0 50px;
}
main {
  flex: 1;
  width: 80%;
  margin: auto;
  border: 1px solid grey;
  display: flex;
  justify-content: space-between;
}
.col {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
}
.colcontent {
  flex: 1;
  background: white;
  overflow-y: auto;
}
.colfoot {
  background: green;
  flex: 0 0 50px;
}
<div class="wrapper">
  <header></header>
  <main>
    <div class="col">
      <div class="colcontent">
      </div>
    </div>
    <div class="col">
      <div class="colcontent">
      </div>
      <div class="colfoot"></div>
    </div>
  </main>
  <footer></footer>
</div>

Codepen Demo with overflow

Answer №2

By strategically using positions, we can make this work even on IE 6.

Sample Code

* {margin: 0; padding: 0; list-style: none; font-family: 'Segoe UI';}

body {padding: 45px 0;}

header, footer {position: fixed; padding: 10px; background-color: #999; text-align: center; top: 0; left: 0; right: 0; height: 25px;}
footer {bottom: 0; top: auto;}

main {width: 100px; background-color: #ccc; height: 750px;}
.main {position: fixed; left: 100px; top: 45px; background-color: #ccf; bottom: 45px; right: 150px;}
<header>Header</header>
<main>Main</main>
<div class="main">DIV.Main</div>
<footer>Footer</footer>

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

Implementing dynamic title insertion into a popover element using jQuery

My goal is to assign a title to my popover object in a local project. I have already included the following files: bootstrap.css v4.2.1 jquery.min.js v2.2.0 bootstrap.min.js v4.2.1 popper.min.js v1.11.0 Initially, there was a basic button present. <i ...

javascriptjqueryhtmlbootstrap-4popover

Interacting with a JavaScript button using C# WebBrowser

Can someone please assist me with a problem I'm facing? I have a webpage coded in HTML and Javascript. Whenever I use webBrowser1.Document.GetElementById("hmenu").InvokeMember("click");, the menu pops up on my screen. However, I am unsure how to cli ...

c#javascripthtmlbrowser

What mistakes have I made in this CSS code?

Check out the REQUEST FORM in the image below (with a green background). It is currently aligned at the top, but I would like it to be centered vertically. https://i.sstatic.net/4A6Tw.jpg This is the CSS style being used, .rtitle { background-color: Gre ...

htmlcss

Tips on saving this information in a MySQL database

I'm currently developing a php script that collects and saves links in mysql. However, I've encountered an issue where the script sometimes captures multiple links for the same download, as shown below: http://www.fileserve.com/file/XXXXXX http: ...

phpmysqlhtml

Using Javascript, the sum of inputs is calculated based on the keyup event

I am a beginner in javascript and I'm learning about events. Below is the HTML code for a table that displays income titles and their respective prices. <table class="table table-hover table-bordered" id="incomeId"> <thead> <tr&g ...

javascriptjqueryhtmlinputsum

caption sliding into the incorrect div box

As I continue my journey of learning CSS, I've encountered a puzzling issue involving slide-in captions within a different div element. The problem arises when I try to customize the appearance of the caption to better fit the overall design of my web ...

htmlcssdivide

I'm just starting to dabble in Perl and am curious about a few things regarding regular expressions

I am currently teaching myself Perl and find that examples are the most effective way for me to learn. Right now, I am delving into a basic Perl script that scrapes a specific blog and have encountered some confusion regarding a few of the regex statements ...

htmlperlscreen-scraping

Adjust the parent div's background when hovering over it

Here is the code snippet I am working with: <div class="thumb_image_holder_orange"> <img src="http://dummyimage.com/114x64/000/fff.png" /> </div> I want to change the background of the div when hovering over the image, rather than j ...

jquerycss

Navigational highlighting of current page section on a one-page website

I'm struggling with adding a navigation bar feature that will highlight the current section being viewed on my website. All I want is for the currently viewed section to appear bold in the navigation bar. Check out the codepen link: HTML <na ...

javascriptjqueryhtmlcss

Error: Attempting to assign a value to the property 'running' of an undefined variable

While working with Nuxt.js, I encountered an issue related to reading the running property of my client object. Here is the HTML code snippet: <b-button v-show="!(projectSelecter(project.ID)).isStarted" //this work just fine variant="success" c ...

javascripthtmltwitter-bootstrapvue.jsnuxt.js

Mobile view causes malfunction in Bootstrap Toggle Burger Menu functionality

<nav class="navbar navbar-expand-lg navbar-dark px-2 " style="background-color:#E53935;"> <a class="navbar-brand" href="#">FoodFusion</a> <button class=&quo ...

phphtmlcssmenu

Struggling to Send Data and Generate a Calculated Value with Django

Hello, I am currently in the process of learning Django as a beginner. I have written some code that allows me to input data, but for some reason, I cannot successfully POST it to the database. I'm not quite sure where I've made an error. Model ...

pythonhtmldjangodjango-models

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

For instance: Press a button - one div flies off the screen while another div flies in. Press the button again - Same div flies out, other div returns. I'm completely new to Javascript/JQuery so any assistance would be highly appreciated! Thank you ...

javascriptjqueryhtmlcss

Adjusting the transparency of the background without impacting the text itself

I've been struggling to create a loading screen with no luck. The animation itself looks fine, but the background is causing issues. Every time I try to adjust the opacity, it affects the text as well. @import url('https://fonts.g ...

css

I'm keen on creating a marquee animation using Tailwind and Next.js

I'm working on creating a marquee animation using Tailwind CSS and Next.js, and I've made some progress. However, the issue I'm facing is that the items are not displaying one after the other smoothly; there seems to be a delay when the seco ...

cssnext.jstailwind-css

Oh no! An operational error occurred while trying to access the page "/1" because it seems like the column

I recently started working with Django and I'm trying to figure out how to display all comments related to a specific listing on an online auction site. Can anyone help me find a solution for this? Models.py class Listing(models.Model): title = m ...

pythonhtmldjangowebdjango-models

Guide to removing selected value from a combobox in Angular

I am working on a simple HTML file that consists of one combobox and one clear button. I want the clear button to remove the selected value from the combobox when clicked. Below is my code: mat-card-content fxLayout="row wrap" fxLayoutAlign="left" fxLayou ...

javascripthtmlangulartypescript

What are some ways to display multiple divs within a single popup window?

I am attempting to create the following layout: https://i.sstatic.net/OzE98.png Here is what I have been able to achieve: https://i.sstatic.net/7GxdP.png In the second picture, the divs are shown separately. My goal is to display the incoming data in a ...

javascripthtmlcssreactjs

Exploring the functionality of Jquery with the :active selector

Here is the code I have been working on: $('#ss a:active').parent().addClass('ss-active'); It seems like my code is not functioning as expected. Can you help me figure out how to achieve my desired outcome? Additionally, I want the bu ...

jqueryhtmlcsscss-selectors

Performing addition and subtraction calculations with HTML and Javascript

I need help creating a simple HTML table for adding and subtracting values, with a limit of 10 and a minimum of 0. I have two functions set up, additionalAdd and additionalSub, triggered by the onclick event, but I keep getting an error saying that totalAd ...

javascripthtml