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

问题描述 投票：-1回答：2

我已将一些随机文本放入我网站的.main部分。该部分有一个固定的height: 100vh高度，我添加了max-height: 100vhwith 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>

谢谢，汤姆

html css
2个回答
2
投票

.main身高应该是

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

问题出在您的html / css代码的父级内。 'wrapper'有一个'溢出'的css属性，这就是你丢失句子的原因，因为它是隐藏的。因此，要修复代码，您需要从'wrapper'中删除溢出，并从'main'中删除溢出。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.