Div Scroll не отображает весь содержащийся текст

Я поместил случайный текст в раздел .main своего веб-сайта. Раздел имеет фиксированную высоту height: 100vh, и я добавил max-height: 100vh с position: absolute and overflow: auto. После тестирования сайта он прокручивается до нескольких последних предложений, а затем останавливается, вырезая другой содержащийся текст. Как мне изменить код, чтобы div .main можно было прокручивать до конца, показывая весь текст.

Вы можете видеть, как текст обрезается внизу после полной прокрутки. Div Scroll не отображает весь содержащийся текст

/* == ~ 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>

Спасибо, Том

Ну, элемент .main не находится в верхней части окна, но его высота составляет 100vh. Что вы ожидали?

— 04.01.2019 08:57

Что ж, у тебя есть решение @MrLister

— 04.01.2019 09:00

Какое решение вам нужно? Должен ли div .main полностью находиться внутри области просмотра? Затем определитесь, какой должна быть высота; это будет 100vh - высота навигационной панели. Или превратите обертку во флексбокс и откажитесь от абсолютного позиционирования.

— 04.01.2019 09:07

html css

04.01.2019 08:45

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

165

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Высота .main должна быть

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

04.01.2019 09:06

Проблема заключается в родительском элементе вашего кода html / css. 'wrapper' имеет атрибут css 'overflow', поэтому вам не хватает предложений, потому что он скрыт. Итак, чтобы исправить код, вам нужно удалить переполнение из «обертки», а также удалить переполнение из «основного».

04.01.2019 09:16

Другие вопросы по теме

Последовательность строки и столбца в начальной загрузке 4.1

Автоматическая ширина столбца таблицы CSS в электронной почте Outlook в формате HTML

Не злоупотребляю ли я здесь sass extension?

Выпадающий список не отображается при эмуляции в IE 5

Какое максимальное количество точек останова должно быть на адаптивном веб-сайте?

Как удалить свойство css с помощью jquery в перетаскивании

Как применить CSS к переменной jQuery?

Всплывающее окно не отображается снаружи при использовании с изменением размера столбца с помощью таблицы PrimeNG

Есть ли способ сделать элемент всегда видимым с помощью display: fixed ;?

Горизонтальная прокрутка (со стрелками) для пакета Angular

Div Scroll не отображает весь содержащийся текст

Ответы 2

Другие вопросы по теме

Похожие вопросы