two elements on top with scrollbar/ fullscreen with a div below fullscreen which stays in place

Question

P.S: below I have an answer with code how I would like to have it look like, but I do not think this is valid code?

I would like to have an interface(HTML5/CSS) that looks like MIRC fullscreen(see image below) and have searched all day even at stackoverflow

What I want is that the interface(GUI only) is fullscreen and that user(right) and chat window(left) have a scrollbar, but that the bottom bar where you type your message stays at the bottom.

Preferable it would only use CSS(but if javascript is needed I will allow it, but rather not) and it does not have to support any old browsers. I think this should be possible because mibbit also has something that looks a lot like this.

I am wondering if there is any framework/library to help me create these kind of apps.

I have been toying around all day with CSS but can not get it to work and I think it is very easy for a CSS guru.

With that rep I would assume you would know that this is off-topic for SO in several different ways. — Paulie_D, Oct 06 '15 at 16:22
what the bli*p It is just a simple CSS snippet and I have been looking on the internet all day? Is it off-topic because you also don't have any clue how to do this and just down-vote/close my question — Alfred, Oct 06 '15 at 16:23
It's not just a `simple snippet"...You haven't provided any code, it's asking for off-site resources, and it's too broad. — Paulie_D, Oct 06 '15 at 16:24
I am asking for just simple two div's on top and one div below that stays in place. That is all(nothing more). What I have is two div's on top, but how can i get the last div below to work? That's all I ask? — Alfred, Oct 06 '15 at 16:26
Please point my in the direction how to achieve this. Point me to other topics that help my tackling this problem — Alfred, Oct 06 '15 at 16:28

Alfred · Accepted Answer · 2016-01-19T02:07:45.093

It was a lot of work(because I am junior CSS level), but this is what I could came up with:

<!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;
    }

    #navigation a {
        text-decoration: none;
        text-align: center;
        height: 16px;
    }

    .selected {
        font-size: 14px;
        padding-left: 5px;
        display: inline-block;
        vertical-align: center;
    }

    #messages {
        height: calc(100% - 50px);
        float: bottom;
        list-style-type: none;
        font-family: "verdana";
    }

    #users {
        float: right;
        width: 200px;
        height: calc(100% - 20px);
        overflow-y: scroll;
        font-family: "monospace";
        list-style-type: none;
    }

    #users li {
        padding: 5px 10px;
        height: 16px;
        font-size: 16px;
        cursor: pointer;
    }

    #messages li { 
        padding: 5px 10px;
        height: auto;
        font-size: 16px;
    }

    #bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 20px;
    }

    #message {
        border-top: 1px inset;
        height: 100%;
        width: 100%;
    }
</style>
</head>
<body>
    <div id="wrapper">
        <div id="left">
            <div id="navigation">
                <li>
                    <img class="img" src="" />
                    <span class="selected">
                        #Main
                    </span>
                </li>
                <li>
                    <img class="img" src="" />
                    <span>
                        #Linus Torvalds
                    </span>
                </li>
                <li>
                    <img class="img" src="" />
                    <span>
                        #Bill Gates
                    </span>
                </li>
            </div>
            <div id="messages"></div>
        </div>
        <div id="users">
            Alfred<br />
            Linus Torvald<br />
            Bill Gates<br />
            Steve Jobs<br />
        </div>
        <div id="bottom">
            <form action="">
                <input id="message" autocomplete="off" /><button>Send</button>
            </form>    
        </div>
    </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;
    }

    #navigation a {
        text-decoration: none;
        text-align: center;
        height: 16px;
    }

    .selected {
        font-size: 14px;
        padding-left: 5px;
        display: inline-block;
        vertical-align: center;
    }

    #messages {
        height: calc(100% - 50px);
        float: bottom;
        list-style-type: none;
        font-family: "verdana";
    }

    #users {
        float: right;
        width: 200px;
        height: calc(100% - 20px);
        overflow-y: scroll;
        font-family: "monospace";
        list-style-type: none;
    }

    #users li {
        padding: 5px 10px;
        height: 16px;
        font-size: 16px;
        cursor: pointer;
    }

    #messages li { 
        padding: 5px 10px;
        height: auto;
        font-size: 16px;
    }

    #bottom {
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 20px;
    }

    #message {
        border-top: 1px inset;
        height: 100%;
        width: 100%;
    }
</style>
</head>
<body>
    <div id="wrapper">
        <div id="left">
            <div id="navigation">
                <li>
                    <img class="img" src="" />
                    <span class="selected">
                        #Main
                    </span>
                </li>
                <li>
                    <img class="img" src="" />
                    <span>
                        #Linus Torvalds
                    </span>
                </li>
                <li>
                    <img class="img" src="" />
                    <span>
                        #Bill Gates
                    </span>
                </li>
            </div>
            <div id="messages"></div>
        </div>
        <div id="users">
            Alfred<br />
            Linus Torvald<br />
            Bill Gates<br />
            Steve Jobs<br />
        </div>
        <div id="bottom">
            <form action="">
                <input id="message" autocomplete="off" /><button>Send</button>
            </form>    
        </div>
    </div>
</body>
</html>

Also available on jsfiddle

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

two elements on top with scrollbar/ fullscreen with a div below fullscreen which stays in place

1 Answers1