Question

P.S：下面我有一个代码的答案，我希望看起来像，但我不认为这是有效的代码？

我想有一个看起来像MIRC全屏的界面（HTML5 / CSS）（见下图）并且甚至在stackoverflow上搜索了一整天

我想要的是界面（仅限GUI）是全屏的，用户（右）和聊天窗口（左）有一个滚动条，但键入消息的底栏位于底部。

首选它只会使用CSS（但是如果需要javascript我会允许它，而不是它）并且它不必支持任何旧的浏览器。我认为这应该是可能的，因为mibbit 也有类似的东西。

我想知道是否有任何框架/库可以帮助我创建这类应用程序。

我整天都在玩CSS，但无法让它工作，我认为这对CSS大师来说非常容易。

Answer 1

这是很多工作（因为我是初级CSS级别），但这是我能想到的：

<!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：

＆＃13;

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

＆＃13;

也可在jsfiddle

上找到

P.S：仅在Google Chrome上进行了全面测试（版本47.0.2526.106（64位Linux））

顶部有两个元素，滚动条/全屏，全屏下面的div保持原位

1 个答案: