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

When working with a barcode font in Chrome, using style.fontFamily may not be effective, but utilizing className can achieve the desired result

Delegating events with .on('click') and using the CSS negation selector :not()

What is the best way to make sure images and text are properly aligned for different screen sizes

What is the method for retrieving the active element with Waypoint?

What is the best way to convert this html code into php?

What is the HTML code to display a table and a video/image side by side?

Learn how to efficiently apply styles to multiple objects within an array using the material-ui library

How to dynamically set Bootstrap navbar item as active based on current filename?

How can I use jQuery to switch the positions of two <div> elements in HTML based on the selection of a dropdown value?

Content from PHP's unlink() function continues to persistently display

Animate an image to the right when clicked, then return it to the left with a second click

Apply a class to every group of x elements

CSS not being applied to certain HTML elements due to an error in implementation

The words overlaid on the image spill out beyond its edges

Can I customize the color of an SVG image with CSS (jQuery SVG image substitution)?

Problem with updating an Html.TextBoxFor based on the value of another one

What is the best way for me to incorporate images retrieved from an API call into my

Having trouble selecting a dynamically changing div element in Selenium with Java using a click action

Django positions the save button

Retrieving PHP variables within the HTML document of the current page