堆棧內存溢出
  簡體   English   中英

頂部的兩個元素帶有滾動條/全屏，全屏下方有一個 div 保持原位

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

 原文  2015-10-06 16:13:16  9   1    css/ html

問題描述

PS：下面我有一個代碼的答案，我希望它看起來像什么，但我認為這不是有效的代碼？

我想要一個看起來像 MIRC 全屏（見下圖）的界面（HTML5/CSS），並且即使在 stackoverflow 上也搜索了一整天

在此處輸入圖片說明

我想要的是界面（僅限 GUI）是全屏的，並且用戶（右）和聊天窗口（左）有一個滾動條，但是您輸入消息的底部欄保持在底部。

最好它只使用 CSS（但如果需要 javascript，我會允許它，但不是），它不必支持任何舊瀏覽器。 我認為這應該是可能的，因為mibbit也有一些看起來很像這樣的東西。

我想知道是否有任何框架/庫可以幫助我創建此類應用程序。

我一整天都在玩 CSS，但無法讓它工作，我認為對於 CSS 大師來說這很容易。

1 個解決方案

解決方案1
 0 已采納  2015-10-06 17:18:03

這是很多工作（因為我是初級 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>

小提琴： 

 <!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上使用

PS：僅在 Google Chrome（版本 47.0.2526.106（64 位 Linux））上進行了全面測試

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 全屏div顯示滾動條 標題div保持在頂部，垂直滾動div下方，滾動條僅附加到該div Header div 停留在頂部，垂直滾動 div 下方僅附有滾動條 使全屏div從頂部向下動畫 在右邊放置許多不同的div元素，每個元素的高度和寬度均為100％（全屏） 全屏設置div的高度，並在div中使用滾動條和標題 滾動條在全屏模式下可見 Canvas 全屏隱藏我的 div 元素 如何添加Header div停留在頂部和垂直滾動div在下面？ 無論如何，即使div位於頂部，也可以獲得可點擊的全屏背景？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM