为什么当高度低于内容大小时，div内的绝对定位内容会被裁剪？

Question

​

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: Pangolin;
    src: url("../Fonts/Pangolin.ttf");
}

* {
    font-family: Pangolin, serif;
    box-sizing: border-box;
}

html, body, header{
    height:100%;
    margin:0;
}

.container-inner{
    min-height: 100%;
    padding:0;
}

#carouselExampleIndicators, .carousel-inner, .carousel-item{
    height: 100%;
}

.carousel-inner{
    overflow: visible;
}

.main-container-in-slider {
    color: #fff;
    position: relative;
    z-index: 2;
    text-transform: uppercase;
}

.main-container-in-slider h1 {
    font-size: 3em;
    font-weight: bold;
    font-family: 'Pangolin', cursive;
    text-shadow: 2px 4px 10px #333;
}

@media only screen and (min-width: 768px) {
    .main-container-in-slider h1 {
        font-size: 4em;
    }
}

.carousel-item .background {
    height:100%;
    background: no-repeat center center scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: blur(6px);
}

.carousel-indicators li:hover {
    background-color: #6e43bf;
    -webkit-transition: background-color 300ms linear;
    transition: background-color 300ms linear;
}

.carousel-indicators li {
    text-indent: initial;
    border-radius: 30px;
    background-color: black;
    opacity: 1;
    padding: 10px 20px;
    box-shadow: none;
    border-width: 0px;
    border-style: solid;
    border-color: RGBA(0, 0, 0, 1);
    margin: 5px;

    color: #ffffff;
    font-size: 0.9em;
    text-shadow: none;
    line-height: 1.2;
    font-style: normal;
    text-decoration: none;
    text-align: center;
    letter-spacing: 1px;
    word-spacing: normal;
    text-transform: uppercase;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}


.carousel-control-prev, .carousel-control-next {
    z-index: 2;
    width: auto;
    margin-left: 10px;
    margin-right: 10px;
}

.carousel-control-prev-icon, .carousel-control-next-icon {
    width: 40px;
    height: 40px;
}

#first-carousel {
    min-height: auto;
}

.data-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    z-index: 2;
    height: 100%;
    width: 95%;
}

.right {
    width: 100%;
}

#custom-controls-carousel {
    position: absolute;
    bottom: 40px;
    z-index: 2;
}


.video-container {
    max-width: 1200px;
}

video {
    width: 100%;
    border-radius: 14px;
}

.slider-caption {
    padding-left: 15px;
    font-size: 2.5em;
    text-transform: uppercase;
}

.slider-text {
    max-width: 600px;
    font-size: 1.2em;
    color: RGBA(255, 255, 255, 0.69);
    letter-spacing: 0.05em;
}


.fas {
    color: white;
}

.fas:hover {
    color: #eae7f7;
}

.overlay {
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 1;
}

.cst-line {
    width: 100px;
    height: 5px;
    background-color: #ffca25;
}

@media only screen and (min-width: 1200px) {
    .right {
        width: 50%;
        max-width: 1200px;
        min-width: 700px;
    }

    #custom-controls-carousel {
        bottom: 50px;
    }

    video {
        min-width: 700px;
    }

    .slider-caption {
        border-left: 5px solid #ffca25;
    }
}

.border-blue {
    border-left-color: #58aaff;
}

.border-green {
    border-left-color: #41ffa6;
}

.border-orange {
    border-left-color: #ff5a4b;
}

.border-purple {
    border-left-color: #8747ff;
}

.line-blue {
    background: #58aaff;
}

.line-green {
    background: #41ffa6;
}

.line-orange {
    background: #ff5a4b;
}

.line-purple {
    background: #8747ff;
}

.btn {
    position: relative;
    z-index: 2;
    color: #ffffff;
    padding: 10px 30px;
    font-size: 1.2em;
    border-radius: 99px;
    font-weight: bold;
    text-shadow: 1px 1px 5px #333;
    letter-spacing: 0.1em;
}

.btn-blue {
    background: #58aaff;
    border: 4px solid #5887ff;
}

.btn-green {
    background: #41ffa6;
    border: 4px solid #43ff96;
}

.btn-orange {
    background: #ff5a4b;
    border: 4px solid #ff2c37;
}

.btn-purple {
    background: #8747ff;
    border: 4px solid #8b50ff;

}

.btn-blue:hover {
    color: #58aaff;
    background-color: black;
}

.btn-green:hover {
    color: #41ffa6;
    background-color: black;
}

.btn-orange:hover {
    color: #ffca25;
    background-color: black;
}

.btn-purple:hover {
    color: #8747ff;
    background-color: black;
}

.fa-play-circle {
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.fa-play-circle:hover {
    color: #e2e4ef;
    cursor: pointer;
}

@media only screen and (max-height: 1000px) {
    .data-container{
        justify-content: start!important;
    }
}

.carousel{
    overflow: scroll;
}

<!DOCTYPE html>
<html lang="sk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/18e42a7034.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>SPŠIT | DOD</title>
</head>
<body>

<header>
    <div id="carouselExampleIndicators" class="carousel slide" data-interval="false">
        <ol class="carousel-indicators d-flex  ">
            <li data-target="#carouselExampleIndicators" data-slide-to="0">
                <span class="d-none d-md-block">
                    Informačné technológie
                </span>
                <i class="fas fa-server fa-2x d-md-none"></i>
            </li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1">
                  <span class="d-none d-md-block">
                    Elektrotechnika
                </span>
                <i class="fas fa-car-battery fa-2x d-md-none"></i>
            </li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2">
               <span class="d-none d-md-block">
                     Informačné a SieŤové technológie
                </span>
                <i class="fas fa-laptop fa-2x d-md-none"></i>
            </li>
            <li data-target="#carouselExampleIndicators" data-slide-to="3">
              <span class="d-none d-md-block">
                    Strojárstvo
                </span>
                <i class="fas fa-wrench fa-2x d-md-none"></i>
            </li>
        </ol>

        <div class="carousel-inner" role="listbox">

            <!-- Slide Two - Set the background image for this slide in the line below -->
            <div class="carousel-item active">
                <div class="background"
                     style="background-image: url('https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fblog.biamp.com%2Fwp-content%2Fuploads%2F2017%2F02%2Fvm_videocodecs_00-1024x681.jpg&f=1&nofb=1')">

                </div>
                <div class="data-container d-flex flex-column justify-content-center flex-xl-row align-items-center mt-3 mt-lg-2 p-2 p-md-4 p-lg-5">
                    <div class="left mr-0 mr-lg-4 mt-2 mt-xl-0 order-2 order-xl-1">
                        <h2 class="slider-caption border-orange text-center text-xl-left ">Informačné technológie</h2>
                        <div class="cst-line d-xl-none mx-auto line-orange"></div>
                        <p class="slider-text text-center text-xl-left p-x pt-2 p-xl-0">
                            Absolvent študijného odboru inteligentné technológie je kvalifikovaný odborný pracovník,
                            ktorý má vedomosti a zručnosti z oblasti informačných technológií, programovania,
                            počítačových sietí, smart technológií, internetu vecí, databázových systémov, základov
                            kybernetickej bezpečnosti, robotiky, 3D technológií, serverových a cloudových technológií,
                            grafiky, základov elektroniky, optimalizácie riadenia procesov a problematiky súvisiacej s
                            digitálnou firmou. Je schopný využívať mäkké zručnosti v prezentovaní a vystupovaní.
                        </p>
                        <div class="text-center text-xl-left">
                            <a href="http://www.spsknm.sk/ssknm/sk/inteligentne-technologie" target="_blank"
                               class="btn btn-orange">
                                <i class="fas fa-hand-point-right"></i>
                                Zistiť viac
                            </a>
                        </div>
                    </div>
                    <div class="right order-1 order-xl-2">
                        <div class="video-container position-relative">
                            <i class="fas fa-play-circle fa-4x position-absolute"></i>
                            <video>
                                <source src="videos/video1.mp4" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide Two - Set the background image for this slide in the line below -->
            <div class="carousel-item">
                <div class="background"
                     style="background-image: url('assets/slider-electro.jpg')">

                </div>
                <div class="data-container d-flex flex-column justify-content-center flex-xl-row align-items-center mt-3 mt-lg-2 p-2 p-md-4 p-lg-5">
                    <div class="left mr-0 mr-lg-4 mt-2 mt-xl-0 order-2 order-xl-1">
                        <h2 class="slider-caption border-green text-center text-xl-left ">Elektrotechnika</h2>
                        <div class="cst-line d-xl-none mx-auto line-green"></div>
                        <p class="slider-text text-center text-xl-left p-x pt-2 p-xl-0">
                            Absolventi študijného odboru sú podľa zamerania pripravení na vykonávanie prác v oblasti
                            konštrukcie, výroby a prevádzky slaboprúdových zariadení, obsluhy, montáže, základnej údržby
                            výpočtovej techniky a počítačových sietí. V oblasti konštrukcie sú pripravení pracovať s
                            grafickým programovým systémom OrCAD 16, LaB VIEW, programujú v jazyku C. Navrhujú a
                            programujú riadiace systémy na báze jednočipových mikrokontrolérov rady AVR a PLC, vytvárajú
                            www stránky a iné internetové aplikácie. Absolventi budú vedieť využívať databázové systémy
                            a komunikovať v jednom svetovom jazyku.
                        </p>
                        <div class="text-center text-xl-left">
                            <a href="http://www.spsknm.sk/ssknm/sk/elektrotechnika" target="_blank"
                               class="btn btn-green">
                                <i class="fas fa-hand-point-right"></i>
                                Zistiť viac
                            </a>
                        </div>
                    </div>
                    <div class="right order-1 order-xl-2">
                        <div class="video-container position-relative">
                            <i class="fas fa-play-circle fa-4x position-absolute"></i>
                            <video>
                                <source src="videos/video1.mp4" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide Two - Set the background image for this slide in the line below -->
            <div class="carousel-item">
                <div class="background"
                     style="background-image: url('assets/slider-ist2.jpg')">

                </div>
                <div class="data-container d-flex flex-column justify-content-center flex-xl-row align-items-center mt-3 mt-lg-2 p-2 p-md-4 p-lg-5">
                    <div class="left mr-0 mr-lg-4 mt-2 mt-xl-0 order-2 order-xl-1">
                        <h2 class="slider-caption border-blue text-center text-xl-left ">INFORMAČNÉ A SIEŤOVÉ
                            TECHNOLÓGIE</h2>
                        <div class="cst-line d-xl-none mx-auto line-blue"></div>
                        <p class="slider-text text-center text-xl-left p-x pt-2 p-xl-0">
                            Absolvent študijného odboru Informačné a sieťové technológie je kvalifikovaný zamestnanec
                            schopný samostatne vykonávať práce pri projektovaní, konštrukcii, výrobe, montáži, ako aj v
                            prevádzke a údržbe zariadení využívajúce moderné IT.
                            Pre kvalifikované vykonávanie uvedených činností získava absolvent štúdiom široký odborný
                            profil s nevyhnutným všeobecným vzdelaním, s dostatočnou adaptabilitou, logickým myslením a
                            schopnosťou aplikovať nadobudnuté vedomosti pri riešení problémov samostatne aj v tíme.
                        </p>
                        <div class="text-center text-xl-left">
                            <a href="http://www.spsknm.sk/ssknm/sk/informacne-a-sietove-technologie" target="_blank"
                               class="btn btn-blue">
                                <i class="fas fa-hand-point-right"></i>
                                Zistiť viac
                            </a>
                        </div>
                    </div>
                    <div class="right order-1 order-xl-2">
                        <div class="video-container position-relative">
                            <i class="fas fa-play-circle fa-4x position-absolute"></i>
                            <video>
                                <source src="videos/video1.mp4" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Slide Two - Set the background image for this slide in the line below -->
            <div class="carousel-item">
                <div class="background"
                     style="background-image: url('assets/slider-engineer.jpg')">

                </div>
                <div class="data-container d-flex flex-column justify-content-center flex-xl-row align-items-center mt-3 mt-lg-2 p-2 p-md-4 p-lg-5">
                    <div class="left mr-0 mr-lg-4 mt-2 mt-xl-0 order-2 order-xl-1">
                        <h2 class="slider-caption border-purple text-center text-xl-left ">Strojártstvo</h2>
                        <div class="cst-line d-xl-none mx-auto line-purple"></div>
                        <p class="slider-text text-center text-xl-left p-x pt-2 p-xl-0">
                            Tento študijný odbor zaznamenal najväčšie zmeny, ktoré sa týkajú predovšetkým obsahu štúdia,
                            hlavne v posilnení zaradenia prác s výpočtovou technikou do všetkých štyroch ročníkov a
                            zaradenie predmetov z oblasti automobilovej konštrukcie a výroby v rámci výbornej spolupráce
                            s KIA Motors Slovakia. Absolventi študijného odboru sú pripravení pracovať v oblasti
                            konštrukcie s grafickým programovým systémom AutoCAD, Inventor a Pro/Engineer Wildfire. Sú
                            pripravení na vykonávanie prác v oblasti technickej prípravy, tvorby technických výkresov a
                            riadenia výroby pomocou počítačov, predovšetkým programovania počítačom riadených CNC
                            obrábacích strojov a v súvislosti s rozmachom automobilového priemyslu sa zaoberajú aj
                            konštrukciou automobilov. Sú pripravení na štúdium na vysokých školách hlavne technického
                            zamerania.
                        </p>
                        <div class="text-center text-xl-left">
                            <a href="http://www.spsknm.sk/ssknm/sk/strojarstvo" target="_blank" class="btn btn-purple">
                                <i class="fas fa-hand-point-right"></i>
                                Zistiť viac
                            </a>
                        </div>
                    </div>
                    <div class="right order-1 order-xl-2">
                        <div class="video-container position-relative">
                            <i class="fas fa-play-circle fa-4x position-absolute"></i>
                            <video source src="videos/video1.mp4" type="video/mp4">
                                Your browser does not support the video tag.
                            </video>
                        </div>
                    </div>
                </div>
            </div>
            <div class="overlay"></div>

            <a class="carousel-control-prev d-none d-xl-flex" href="#carouselExampleIndicators" role="button"
               data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next d-none d-xl-flex" href="#carouselExampleIndicators" role="button"
               data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
</header>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<script src="js/bootstrap.js"></script>
</body>
</html>

​

我的问题是：

当内容高度大于屏幕高度时，我的Carousel中定义为100%高度的内容不会动态扩展。例如，当高度为500px时，它不足以在屏幕上显示我所有的内容。但是内容是不可滚动的，但它会像overflow:hidden属性中那样被裁剪。为什么会这样工作，如何防止这种行为？

我认为没有必要把我所有的代码放在这里，因为它只是css和html。我在我自己的实时服务器上有这个，所以我在这里只放了url。如果有人知道，我会非常感激的。

我的链接：https://younglocal.sk

这是一张图片，你可以看到我的内容在低分辨率下是不可滚动的。它正在被修剪。

​

我可以把我的css + html放在那里，但正如我为分析问题而写的那样，当它放在实时服务器上时，就没有必要了……Thx

Answer 1

因为你只分享了你的链接，所以我已经用inspect工具解决了这个问题。可能不太准确。

.carousel-item.active, .carousel-item-next, .carousel-item-prev{
    overflow: scroll;
}