Div Scroll不显示所有包含的文本

时间:2019-01-04 07:45:37

标签: html css

我在网站的.main部分中放置了一些随机文本。该部分的固定高度为height: 100vh,并且我为max-height: 100vh添加了position: absolute and overflow: auto。测试完网站后,它会向下滚动到最后几个句子,然后停止,剪切包含的其他文本。我将如何更改代码,以便div .main可以一直滚动到整个显示所有文本。

完全滚动后,您可以在底部看到文本的截取方式。

/* == ~ Copyright (c) myEd (made by students, for students.) 2019. == */

html > body {
    height: 100%;
    overflow: hidden;
    font-family: Helvetica, Arial, sans-serif;
    margin: 0;
    background: #444;
}

#wrapper {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

.navBar {
    font-family: Helvetica, Arial, sans-serif;
    background: #333;
    overflow: hidden;
}

.navBar > a {
    float: left;
    font-size: 8px;
    color: #FFF;
    text-align: center;
    padding: 12px 8px;
    text-decoration: none;
    display: block;
    top: 0;
}

#productLogo {
    float: right;
    width: 8em;
    margin-right: -10px;
}

.menuDropDown {
    float: left;
    overflow: hidden;
}

.menuDropDown > #menuButton {
    font-size: 8px;
    border: none;
    outline: none;
    color: #FFF;
    padding: 12px 8px;
    background: inherit;
    font: inherit;
    margin: 0;
}

#menuButton:hover, .navBar > a > .menuDropDown:hover > #menuButton {
    background: #999;
    color: #1B315E;
    border: none;
    outline: none;
}

.menuContent {
    display: none;
    position: absolute;
    background: none;
    width: 100%;
    left: 0;
    z-index: 1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    max-height: 85vh;
    overflow: auto;
}

.menuDropDown:hover > .menuContent {
    display: block;
}

.menuColumn {
    float: left;
    width: 20%;
    padding: 10px;
    background-color: #999;
    height: 235px;
    overflow-y: auto;
}

#menuColumnHeader {
    color: #1B315E;
}

.menuColumn > a {
    float: none;
    color: #1B315E;
    padding: 12px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-size: 14px;
}

.menuColumn > a:hover {
    background-color: #A5A5A5;
}

.menuColumn > a.active {
    background-color: #B6B6B6;
}

.menuRow: after {
    content: "";
    display: table;
    clear: both;
}

.main {
    width: 80%;
    height: 100vh;
    max-height: 100vh;
    float: left;
    background: none;
    position: absolute;
    overflow: auto;
}

.sideBar {
    margin-left: 80%;
    height: 100vh;
    background: none;
    overflow: hidden;
    position: relative;
}

#news {
    position: absolute;
    width: 100%;
    height: calc(100vh - 43px);
    top: 0;
    left: 0;
}

@media screen and (max-width: 600px) {
    .menuColumn {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 768px) {
    .sideBar {
        display: none !important;
    }
    .main {
        width: 100%;
    }
}
<!DOCTYPE HTML>
<!--
    ~ Copyright (c) myEd (made by students, for students.) 2019.
-->
<html lang="en-AU">
<head>
    <title>Welcome | myEd</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/Resources/CSS/style.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="shortcut icon" href="/Resources/Img/favicon.png">
    </head>
    
    <body>
    <div id="wrapper">
        <div class="navBar">
            <img src="/Resources/Img/myEd.png" alt="myEd" title="myEd Software" id="productLogo">
        <div class="menuDropDown">
            <button id="menuButton" title="Whole Site Navigation"><i class="fas fa-bars"></i> Menu</button>
            <div class="menuContent">
            <div class="menuRow">
                <div class="menuColumn">
                    <h5 id="menuColumnHeader" title="Home Workspace">Home Workspace</h5>
                    <a href="#" class="active" title="Welcome"><i class="fas fa-exclamation-circle"></i> Welcome</a>
                    <a href="#" title="Timetable"><i class="far fa-calendar-alt"></i> Timetable</a>
                    <a href="#" title="Help"><i class="fa fa-question-circle"></i> Help</a>
                    <a href="#" title="Dashboard"><i class="fas fa-chart-line"></i> Dashboard</a>
                </div>
                </div>
            </div>
            </div>
        </div>
        <div class="main">
        Up unpacked friendly ecstatic so possible humoured do. Ample end might folly quiet one set spoke her. We no am former valley assure. Four need spot ye said we find mile. Are commanded him convinced dashwoods did estimable forfeited. Shy celebrated met sentiments she reasonably but. Proposal its disposed eat advanced marriage sociable. Drawings led greatest add subjects endeavor gay remember. Principles one yet assistance you met impossible. 

Piqued favour stairs it enable exeter as seeing. Remainder met improving but engrossed sincerity age. Better but length gay denied abroad are. Attachment astonished to on appearance imprudence so collecting in excellence. Tiled way blind lived whose new. The for fully had she there leave merit enjoy forth. 

Ferrars all spirits his imagine effects amongst neither. It bachelor cheerful of mistaken. Tore has sons put upon wife use bred seen. Its dissimilar invitation ten has discretion unreserved. Had you him humoured jointure ask expenses learning. Blush on in jokes sense do do. Brother hundred he assured reached on up no. On am nearer missed lovers. To it mother extent temper figure better. 

Living valley had silent eat merits esteem bed. In last an or went wise as left. Visited civilly am demesne so colonel he calling. So unreserved do interested increasing sentiments. Vanity day giving points within six not law. Few impression difficulty his use has comparison decisively. 

When be draw drew ye. Defective in do recommend suffering. House it seven in spoil tiled court. Sister others marked fat missed did out use. Alteration possession dispatched collecting instrument travelling he or on. Snug give made at spot or late that mr. 

Attention he extremity unwilling on otherwise. Conviction up partiality as delightful is discovered. Yet jennings resolved disposed exertion you off. Left did fond drew fat head poor. So if he into shot half many long. China fully him every fat was world grave. 

Started several mistake joy say painful removed reached end. State burst think end are its. Arrived off she elderly beloved him affixed noisier yet. An course regard to up he hardly. View four has said does men saw find dear shy. Talent men wicket add garden. 

Civility vicinity graceful is it at. Improve up at to on mention perhaps raising. Way building not get formerly her peculiar. Up uncommonly prosperous sentiments simplicity acceptance to so. Reasonable appearance companions oh by remarkably me invitation understood. Pursuit elderly ask perhaps all. 

May musical arrival beloved luckily adapted him. Shyness mention married son she his started now. Rose if as past near were. To graceful he elegance oh moderate attended entrance pleasure. Vulgar saw fat sudden edward way played either. Thoughts smallest at or peculiar relation breeding produced an. At depart spirit on stairs. She the either are wisdom praise things she before. Be mother itself vanity favour do me of. Begin sex was power joy after had walls miles. 

Of on affixed civilly moments promise explain fertile in. Assurance advantage belonging happiness departure so of. Now improving and one sincerity intention allowance commanded not. Oh an am frankness be necessary earnestly advantage estimable extensive. Five he wife gone ye. Mrs suffering sportsmen earnestly any. In am do giving to afford parish settle easily garret.
            Up unpacked friendly ecstatic so possible humoured do. Ample end might folly quiet one set spoke her. We no am former valley assure. Four need spot ye said we find mile. Are commanded him convinced dashwoods did estimable forfeited. Shy celebrated met sentiments she reasonably but. Proposal its disposed eat advanced marriage sociable. Drawings led greatest add subjects endeavor gay remember. Principles one yet assistance you met impossible. 

Piqued favour stairs it enable exeter as seeing. Remainder met improving but engrossed sincerity age. Better but length gay denied abroad are. Attachment astonished to on appearance imprudence so collecting in excellence. Tiled way blind lived whose new. The for fully had she there leave merit enjoy forth. 

Ferrars all spirits his imagine effects amongst neither. It bachelor cheerful of mistaken. Tore has sons put upon wife use bred seen. Its dissimilar invitation ten has discretion unreserved. Had you him humoured jointure ask expenses learning. Blush on in jokes sense do do. Brother hundred he assured reached on up no. On am nearer missed lovers. To it mother extent temper figure better. 

Living valley had silent eat merits esteem bed. In last an or went wise as left. Visited civilly am demesne so colonel he calling. So unreserved do interested increasing sentiments. Vanity day giving points within six not law. Few impression difficulty his use has comparison decisively. 

When be draw drew ye. Defective in do recommend suffering. House it seven in spoil tiled court. Sister others marked fat missed did out use. Alteration possession dispatched collecting instrument travelling he or on. Snug give made at spot or late that mr. 

Attention he extremity unwilling on otherwise. Conviction up partiality as delightful is discovered. Yet jennings resolved disposed exertion you off. Left did fond drew fat head poor. So if he into shot half many long. China fully him every fat was world grave. 

Started several mistake joy say painful removed reached end. State burst think end are its. Arrived off she elderly beloved him affixed noisier yet. An course regard to up he hardly. View four has said does men saw find dear shy. Talent men wicket add garden. 

Civility vicinity graceful is it at. Improve up at to on mention perhaps raising. Way building not get formerly her peculiar. Up uncommonly prosperous sentiments simplicity acceptance to so. Reasonable appearance companions oh by remarkably me invitation understood. Pursuit elderly ask perhaps all. 

May musical arrival beloved luckily adapted him. Shyness mention married son she his started now. Rose if as past near were. To graceful he elegance oh moderate attended entrance pleasure. Vulgar saw fat sudden edward way played either. Thoughts smallest at or peculiar relation breeding produced an. At depart spirit on stairs. She the either are wisdom praise things she before. Be mother itself vanity favour do me of. Begin sex was power joy after had walls miles. 

Of on affixed civilly moments promise explain fertile in. Assurance advantage belonging happiness departure so of. Now improving and one sincerity intention allowance commanded not. Oh an am frankness be necessary earnestly advantage estimable extensive. Five he wife gone ye. Mrs suffering sportsmen earnestly any. In am do giving to afford parish settle easily garret. 
        </div>
        <div class="sideBar">
            <iframe id="news" frameborder="0" src="/Resources/News/index.html"></iframe>
        </div>
        </div>
    </body>
</html>

谢谢, 汤姆

2 个答案:

答案 0 :(得分:2)

.main的高度应为

height: calc(100vh - 100px); /* change 100px with the height of your header*/

答案 1 :(得分:0)

问题出在您的html / css代码的父代码之内。 'wrapper'具有'overflow'css属性,这就是为什么您缺少句子的原因,因为它是隐藏的。因此,要修复代码,您需要从“包装器”中删除溢出,也需要从“主”器中删除溢出。