Above, there are two components with a scrollbar, while below there is a fixed div that remains in place when the screen

Question

Above, there are two components with a scrollbar, while below there is a fixed div that remains in place when the screen

Just a heads up: below is an example with code of how I envision my interface to look, but I'm not sure if it's valid?

I've been trying to create an HTML5/CSS interface that resembles the MIRC fullscreen layout (check out the image below) and I've been searching all day, even on Stack Overflow.

https://i.stack.imgur.com/OmPWh.jpg

What I aim for is a fullscreen interface where the user window (on the right) and chat window (on the left) have scrollbars, while keeping the message input bar at the bottom.

The ideal scenario would be achieving this using only CSS (although I can consider JavaScript if necessary), without worrying about older browser compatibility. I believe this should be doable since Mibbit has something very similar to what I want.

I'm curious if there are any frameworks or libraries that could assist me in creating such applications.

I've been experimenting with CSS all day but haven't quite figured it out yet; I reckon it's a piece of cake for someone proficient in CSS.

css html

Answer 1

Answer №1

Even though I'm at a junior CSS level, I put in a lot of effort and managed to come up with this solution:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
    *, html, body {
        height: 100%;
        margin: 0;
    }

    body {
        overflow: hidden;
    }

    #wrapper {
        min-height: 100%;
        overflow: none;
    }

    #left {
        float: left;
        width: calc(100% - 200px);
        height: calc(100% - 20px);
        overflow-y: scroll;
    }

    #navigation {
        float: top;
        border-style: inset;
        background: lightgrey;
        padding: 5px;
        height: 16px;

    }
    
    // More CSS styles...

</style>
</head>
<body>
    <div id="wrapper">
        // Rest of the HTML structure...
    </div>
</body>
</html>

Jsfiddle:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
    *, html, body {
    height: 100%;
        margin: 0;
    }

    body {
        overflow: hidden;
    }

    #wrapper {
        min-height: 100%;
        overflow: none;
    }

    #left {
        float: left;
        width: calc(100% - 200px);
        height: calc(100% - 20px);
        overflow-y: scroll;
    }

    #navigation {
        float: top;
        border-style: inset;
        background: lightgrey;
        padding: 5px;
        height: 16px;
        
    }

    .img {
        width: 16px;
        height: 16px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
        no-repeat;
        vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
        background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */

    }
   
    #navigation li {
        height: 32px;
        margin-right: 5px;
        float: left;
        list-style-type: none;
        margin-right: 5px;
    }

    // More CSS styles...

</style>
</head>
<body>
    <div id="wrapper">
        // Rest of the HTML structure...
    </div>
</body>
</html>

Also available on jsfiddle

P.S: Only tested thoroughly tested on Google Chrome(Version 47.0.2526.106 (64-bit Linux))

Answer 2

Even though I'm at a junior CSS level, I put in a lot of effort and managed to come up with this solution:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
    *, html, body {
        height: 100%;
        margin: 0;
    }

    body {
        overflow: hidden;
    }

    #wrapper {
        min-height: 100%;
        overflow: none;
    }

    #left {
        float: left;
        width: calc(100% - 200px);
        height: calc(100% - 20px);
        overflow-y: scroll;
    }

    #navigation {
        float: top;
        border-style: inset;
        background: lightgrey;
        padding: 5px;
        height: 16px;

    }
    
    // More CSS styles...

</style>
</head>
<body>
    <div id="wrapper">
        // Rest of the HTML structure...
    </div>
</body>
</html>

Jsfiddle:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
    *, html, body {
    height: 100%;
        margin: 0;
    }

    body {
        overflow: hidden;
    }

    #wrapper {
        min-height: 100%;
        overflow: none;
    }

    #left {
        float: left;
        width: calc(100% - 200px);
        height: calc(100% - 20px);
        overflow-y: scroll;
    }

    #navigation {
        float: top;
        border-style: inset;
        background: lightgrey;
        padding: 5px;
        height: 16px;
        
    }

    .img {
        width: 16px;
        height: 16px;
        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAK3RFWHRDcmVhdGlvbiBUaW1lAM/tIDE5IOj+6yAyMDA0IDIwOjE2OjQzICswMzAwn4mdcgAAAAd0SU1FB9UFGg8uEROIcVQAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAEZ0FNQQAAsY8L/GEFAAAAKlBMVEX/AAC4jSzPr0yncQG8jA7+/qz9+JDKqTfGjgHvuQD66Wb6xwb7+NT+/v2CyXEoAAAAAXRSTlMAQObYZgAAAIVJREFUKM99zUERhFAMA9BawAIWagELsRALWPgWaiEWYgELeNkL7DDL7+bUvpmmEdt4JuIFQ3iE2wSA4zwPgLJLOYe7sdzA1Ue5AeJ7UnOQAJKS3ML9tBqwJUly9WDbrqoqzoAAZIsAoAnEyEwW18zMzJhARCS5X2MH2Jb4Dz/7G5Y1evgAaj7AUSA5oLUAAAAASUVORK5CYII=);
        no-repeat;
        vertical-align: middle; /* http://stackoverflow.com/a/489394/11926 */
        background-size:contain; /* http://stackoverflow.com/a/20708979/11926 */

    }
   
    #navigation li {
        height: 32px;
        margin-right: 5px;
        float: left;
        list-style-type: none;
        margin-right: 5px;
    }

    // More CSS styles...

</style>
</head>
<body>
    <div id="wrapper">
        // Rest of the HTML structure...
    </div>
</body>
</html>

Also available on jsfiddle

P.S: Only tested thoroughly tested on Google Chrome(Version 47.0.2526.106 (64-bit Linux))

Above, there are two components with a scrollbar, while below there is a fixed div that remains in place when the screen

Answer №1

Similar questions

Maintaining the proportions of divs containing background images

Stay tuned for updates on elements being loaded into a div from an external source

Personalized form outlines

The CSS stylesheet appears to be properly linked, however, it is not displaying correctly on the preview page

Remove the unnecessary space at the bottom of the Mat Dialog

Why is the label on my styled checkbox shifting position?

How can I filter rows in HTML using Vue.js based on string options?

The icon cannot be displayed using the <use> tag in HTML

The website was designed to only allow scrolling on desktop devices, not on mobile devices

Tips for creating a responsive CSS "drawing"

The implementation of modal pop-ups is resulting in unresponsive touch areas on mobile devices and tablets

Unable to make changes to the text within the textarea field

Customize the layout of menu icon in HTML/CSS using FlexBox Grid

Labels are overlapping each other and being aligned to the right side

Which is Better for Creating DropDown Menus: CSS or JavaScript?

Error arising from CSS positioning with dynamically generated images

Unable to extract certain features from Zillow's website

Having trouble with JQuery Draggable in FireFox only working in an iFrame? Learn how to set the ViewPort to fix

The width of table columns is altered upon the second rendering in JQuery DataTables

The HTML 5 video is not functioning properly on an iPad, and the layout of the iPad has black areas on the sides