文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的网站比窗口稍宽？

问为什么我的网站比窗口稍宽？
EN

Stack Overflow用户

提问于 2021-05-04 13:25:45

回答 2查看 92关注 0票数 1

我正在做一个学校项目，在这个项目中，我必须创建一个小网页，向你介绍一个可选择的主题。

不幸的是，我的网站有一个水平滚动条，我不知道是哪个元素造成的。我试着一次又一次地禁用元素，但没有找到解决方案

谢谢您的提示！

<!doctype html>
<html lang="de">
    <head>
        <title>VR</title>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <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">
    </head>
    <body>
        <nav id="colorlib-main-nav" role="navigation">
            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle active"><i></i></a>
            <div class="js-fullheight colorlib-table">
                <div class="img" style="background-image: url(images/bg_3.jpg);"></div>
                <div class="colorlib-table-cell js-fullheight">
                <div class="row no-gutters">
                    <div class="col-md-12 text-center">
                    <h1 class="mb-4"><a href="index.html" class="logo">Company Logo</a></h1>
                    <ul>
                        <li class="active"><a href="index.html"><span>Home</span></a></li>
                        <li><a href="about.html"><span>About</span></a></li>
                        <li><a href="blog.html"><span>Blog</span></a></li>
                        <li><a href="contact.html"><span>Contact</span></a></li>
                    </ul>
                    </div>
                </div>
                </div>
            </div>
        </nav>

        <div class="header h-100">
            <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle"><i></i></a>
            <h1 id="h-100" class="introduction h-100">Virtual Reality</h1>
            
        </div>

        <div class="h-100">
            <h2 class="center">Was ist Virtual Reality (VR)</h2>
            <p class="center">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
        </div>
        

        <div id="vr-headset-kategorien" class="">
            <!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right-->
            <div id="standalone" class="row">
                <!---->
                <div class="vr-left_side container col-lg-6">
                    <div class="sketchfab-embed-wrapper"> <iframe title="Quest 2 Headset - FanArt" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Quest 2 Headset - FanArt </a> by <a href="https://sketchfab.com/josevillotguisan?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> joseVG </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
                </div>
                
                <div class="vr-right_side container col-lg-6">
                    <h3>Standalone</h3>
                
                    <p>Standalone VR-Headsets ben&ouml;tigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super f&uuml;r Anf&auml;nger geeignet</p>

                    <p>
                    Vorteile:<br />
                    Kein guter PC ben&ouml;tigt<br />
                    Niedriger Einstiegspreis trotz guter Hardware<br/>
                    Gut optimierbar, da es für das Heaset nur einen Prozessor gibt</p>
                    
                    <p>Nachteile:<br />
                    Je nach Headset schlechte Performance bei fordernden Spielen</p>
                </div>
                
            </div>

            <div id="pc" class="row">
                <div class="vr-left_side container col-lg-6">
                    <div class="sketchfab-embed-wrapper"> <iframe title="HTC Vive" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&autostart=1&ui_hint=0"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> HTC Vive </a> by <a href="https://sketchfab.com/EternalRealm?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Eternal Realm </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
                </div>
                
                <div class="vr-right_side container col-lg-6">
                    <h3>PC-VR</h3>
                    <p>PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden &uuml;ber ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem sch&ouml;nes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie vor allem f&uuml;r Enthusiasten geeignet</p>

                    <p>Vorteile:<br />
                    Hohe Aufl&ouml;sung<br />
                    Wenig Lags</p>

                    <p>Nachteile:<br />
                    Hoher Einstiegspreis</p>
                </div>
            </div>

            <div id="fulldive" class="row">
                <div class="vr-left_side container col-lg-6">
                    <div class="sketchfab-embed-wrapper"> <iframe title="neuraLink" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&autostart=1"> </iframe> <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> neuraLink </a> by <a href="https://sketchfab.com/rfarencibia?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> rfarencibia </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p></div>
                </div>
                
                <div class="vr-right_side container col-lg-6">
                    <h3>Full-Dive VR</h3>
                    <p>Tauche komplett in die VR-Welt ein. Full-Dive VR-Headsets befinden sich bereits in Entwicklung. Bei diesem Ansatz wird keine VR-Brille verwendet, die wie ein Monitor funktioniert sondern Full-Dive VR-Headsets greifen direkt auf die Seh-, Tast-, und weitere Nerven zu. Daher ist dies auch die umstrittenste Technologie</p>

                    <p>Vorteile:<br />
                    Unvergleichliche Immersion</p>

                    <p>Nachteile:<br />
                    Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber m&ouml;glich</p>
                </div>
            </div>

        </div>

        

      
        <!-- Optional JavaScript -->
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <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>
            (function($) {

            "use strict";

            var fullHeight = function() {

                $('.js-fullheight').css('height', $(window).height());
                $(window).resize(function(){
                    $('.js-fullheight').css('height', $(window).height());
                });

            };
            fullHeight();

            var burgerMenu = function() {

                $('.js-colorlib-nav-toggle').on('click', function(event) {
                    event.preventDefault();
                    var $this = $(this);
                    if( $('body').hasClass('menu-show') ) {
                        $('body').removeClass('menu-show');
                        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
                    } else {
                        $('body').addClass('menu-show');
                        setTimeout(function(){
                            $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
                        }, 900);
                    }
                })
            };
            burgerMenu();


            })(jQuery);
        </script>
    </body>
</html>

html, body {
    background-color: black;

    color: white;
    height: 100%;
    min-height: 100%;

}

#h-100{
    /*height: 100%;
    min-height: 100%;*/

    /*padding-top: 30%;
    padding-bottom: 30%;*/

    text-align: center;
}

.introduction {
    background-image: url("beat-saber-intro.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

.row{
    padding-bottom: 10%;
}

.sketchfab-embed-wrapper{
    height: 100%;
    margin-bottom: 200px;
}

iframe{
    height: 100%;
    width: 100%;
}

header {
    height: 100%;
    min-height: 100%;
}

.center{
    text-align: center;
}

/* Menu*/
.img {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center; }
  
  #colorlib-main-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.99);
    z-index: 1002;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    -webkit-transform: scale(0.1);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    overflow-y: scroll; }
    #colorlib-main-nav .colorlib-table {
      display: table;
      width: 100%;
      height: 100%; }
      #colorlib-main-nav .colorlib-table .img {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
        opacity: 1; }
        #colorlib-main-nav .colorlib-table .img:after {
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          right: 0;
          content: '';
          background: rgba(0, 0, 0, 0.3); }
      #colorlib-main-nav .colorlib-table .colorlib-table-cell {
        display: table-cell;
        vertical-align: middle; }
    #colorlib-main-nav .colorlib-nav-toggle {
      position: absolute;
      top: 40px;
      right: 40px;
      padding: 20px;
      height: 44px;
      width: 44px;
      line-height: 0;
      padding: 0 !important;
      visibility: hidden;
      opacity: 0;
      -webkit-transition: 0.3s;
      -o-transition: 0.3s;
      transition: 0.3s; }
      @media (prefers-reduced-motion: reduce) {
        #colorlib-main-nav .colorlib-nav-toggle {
          -webkit-transition: none;
          -o-transition: none;
          transition: none; } }
      #colorlib-main-nav .colorlib-nav-toggle i {
        top: 18px !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        line-height: 0;
        text-indent: 0; }
      #colorlib-main-nav .colorlib-nav-toggle.show {
        visibility: visible;
        opacity: 1; }
      #colorlib-main-nav .colorlib-nav-toggle:hover i::before, #colorlib-main-nav .colorlib-nav-toggle:hover i::after {
        content: '';
        width: 40px;
        height: 2px;
        background: #fff;
        position: absolute;
        left: 0; }
    .menu-show #colorlib-main-nav {
      visibility: visible;
      opacity: 1;
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1); }
    #colorlib-main-nav .logo {
      font-size: 40px;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-weight: 700;
      position: relative;
      display: inline-block;
      margin-bottom: 0;
      line-height: 1.5;
      font-family: "Poppins", Arial, sans-serif; }
      #colorlib-main-nav .logo span {
        font-size: 14px;
        display: block;
        font-weight: 300;
        color: rgba(255, 255, 255, 0.8);
        letter-spacing: 8px; }
    #colorlib-main-nav ul {
      padding: 0;
      margin: 0;
      display: block; }
      @media (max-width: 767.98px) {
        #colorlib-main-nav ul {
          padding: 20px 0 0 0; } }
      #colorlib-main-nav ul li {
        padding: 0;
        margin: 0;
        list-style: none;
        font-weight: 600;
        font-size: 14px;
        letter-spacing: 5px;
        text-transform: uppercase; }
        #colorlib-main-nav ul li a {
          display: block;
          color: white;
          padding: 5px 0; }
          #colorlib-main-nav ul li a span {
            color: white;
            position: relative;
            padding: 0 10px; }
            #colorlib-main-nav ul li a span small {
              position: absolute;
              bottom: 7px;
              left: -30px;
              font-size: 16px;
              color: rgba(255, 255, 255, 0.3);
              border-bottom: 1px solid rgba(255, 255, 255, 0.3); }
          #colorlib-main-nav ul li a:hover, #colorlib-main-nav ul li a:active, #colorlib-main-nav ul li a:focus {
            outline: none;
            text-decoration: none; }
            #colorlib-main-nav ul li a:hover span:before, #colorlib-main-nav ul li a:active span:before, #colorlib-main-nav ul li a:focus span:before {
              visibility: visible;
              -webkit-transform: scaleX(1);
              -moz-transform: scaleX(1);
              -ms-transform: scaleX(1);
              -o-transform: scaleX(1);
              transform: scaleX(1); }
        #colorlib-main-nav ul li.active a span {
          color: #f8b500; }
          #colorlib-main-nav ul li.active a span:before {
            background: #fec771;
            visibility: visible;
            -webkit-transform: scaleX(1);
            -moz-transform: scaleX(1);
            -ms-transform: scaleX(1);
            -o-transform: scaleX(1);
            transform: scaleX(1); }
  
  header {
    padding: 2em 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9;
    margin: 0 auto; }
    @media (max-width: 767.98px) {
      header {
        padding: 1em 0;
        position: absolute; } }
    header .colorlib-navbar-brand {
      float: left; }
      header .colorlib-navbar-brand .colorlib-logo {
        font-size: 12px;
        color: #fff;
        letter-spacing: 5px;
        font-weight: 600;
        position: relative;
        display: inline-block;
        margin-bottom: 0;
        line-height: 1.5;
        font-family: "Poppins", Arial, sans-serif;
        text-transform: uppercase; }
        header .colorlib-navbar-brand .colorlib-logo span {
          font-size: 11px;
          display: block;
          font-weight: 300;
          color: rgba(255, 255, 255, 0.8);
          letter-spacing: 7px; }
        header .colorlib-navbar-brand .colorlib-logo i {
          color: #fec771;
          position: absolute;
          top: -18px;
          bottom: 0;
          left: 7px;
          font-size: 48px; }
        header .colorlib-navbar-brand .colorlib-logo:hover {
          text-decoration: none !important; }
        header .colorlib-navbar-brand .colorlib-logo:active, header .colorlib-navbar-brand .colorlib-logo:focus {
          outline: none;
          text-decoration: none; }
  
  .colorlib-nav-toggle {
    cursor: pointer;
    text-decoration: none; }
    .colorlib-nav-toggle.active i::before, .colorlib-nav-toggle.active i::after {
      background: #000; }
    .colorlib-nav-toggle.dark.active i::before, .colorlib-nav-toggle.dark.active i::after {
      background: #000; }
    .colorlib-nav-toggle:hover, .colorlib-nav-toggle:focus, .colorlib-nav-toggle:active {
      outline: none;
      border-bottom: none !important; }
    .colorlib-nav-toggle i {
      position: relative;
      display: inline-block;
      width: 20px;
      height: 2px;
      color: #000;
      font: bold 14px/.4 Helvetica;
      text-transform: uppercase;
      text-indent: -55px;
      background: #fff;
      -webkit-transition: all .2s ease-out;
      -o-transition: all .2s ease-out;
      transition: all .2s ease-out; }
      .menu-show .colorlib-nav-toggle i {
        background: #fff;
        color: #fff; }
      .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
        content: '';
        width: 30px;
        height: 2px;
        background: #fff;
        position: absolute;
        left: 0;
        -webkit-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s; }
        .menu-show .colorlib-nav-toggle i::before, .menu-show .colorlib-nav-toggle i::after {
          background: #fff; }
        @media (prefers-reduced-motion: reduce) {
          .colorlib-nav-toggle i::before, .colorlib-nav-toggle i::after {
            -webkit-transition: none;
            -o-transition: none;
            transition: none; } }
    .colorlib-nav-toggle.dark i {
      position: relative;
      color: #fff;
      background: #fff;
      -webkit-transition: all .2s ease-out;
      -o-transition: all .2s ease-out;
      transition: all .2s ease-out; }
      .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
        background: #fff;
        -webkit-transition: 0.2s;
        -o-transition: 0.2s;
        transition: 0.2s; }
        @media (prefers-reduced-motion: reduce) {
          .colorlib-nav-toggle.dark i::before, .colorlib-nav-toggle.dark i::after {
            -webkit-transition: none;
            -o-transition: none;
            transition: none; } }
  
  .colorlib-nav-toggle i::before {
    top: -7px; }
  
  .colorlib-nav-toggle i::after {
    bottom: -7px; }
  
  .colorlib-nav-toggle:hover i::before {
    top: -10px; }
  
  .colorlib-nav-toggle:hover i::after {
    bottom: -10px; }
  
  .colorlib-nav-toggle.active i {
    background: transparent; }
  
  .colorlib-nav-toggle.active i::before {
    top: 0;
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -ms-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg); }
  
  .colorlib-nav-toggle.active i::after {
    bottom: 0;
    -webkit-transform: rotateZ(-45deg);
    -moz-transform: rotateZ(-45deg);
    -ms-transform: rotateZ(-45deg);
    -o-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg); }
  
  .colorlib-nav-toggle {
    float: right;
    z-index: 1003;
    position: relative;
    top: 0;
    right: 0;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    margin-top: 0; }
    @media (max-width: 767.98px) {
      .colorlib-nav-toggle {
        right: 10px; } }
  
  .hero-wrap {
    background: #202020; }
    .hero-wrap .slider-text .desc h1 {
      font-size: 6vw;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase; }
    .hero-wrap .slider-text .desc h3 {
      color: rgba(255, 255, 255, 0.8);
      font-size: 18px; }

css

bootstrap-4

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-05-04 13:42:35

--您使用的是行，而不是在它们周围使用容器。，这两个元素具有平衡边距。请参阅医生们，并将container或container-fluid添加到行的父行中。

列上不应该有容器类。即使在筑巢的时候也不需要它们。

票数 2

Stack Overflow用户

发布于 2021-05-04 13:34:56

.row类中的页边距导致了以下问题：

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* margin-right: -15px; */
  /* margin-left: -15px; */
}

您可以将overflow-x: hidden;添加到body作为快速修复。

(function($) {

  "use strict";

  var fullHeight = function() {

    $('.js-fullheight').css('height', $(window).height());
    $(window).resize(function() {
      $('.js-fullheight').css('height', $(window).height());
    });

  };
  fullHeight();

  var burgerMenu = function() {

    $('.js-colorlib-nav-toggle').on('click', function(event) {
      event.preventDefault();
      var $this = $(this);
      if ($('body').hasClass('menu-show')) {
        $('body').removeClass('menu-show');
        $('#colorlib-main-nav > .js-colorlib-nav-toggle').removeClass('show');
      } else {
        $('body').addClass('menu-show');
        setTimeout(function() {
          $('#colorlib-main-nav > .js-colorlib-nav-toggle').addClass('show');
        }, 900);
      }
    })
  };
  burgerMenu();


})(jQuery);

html,
body {
  background-color: black;
  color: white;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

#h-100 {
  /*height: 100%;
    min-height: 100%;*/
  /*padding-top: 30%;
    padding-bottom: 30%;*/
  text-align: center;
}

.introduction {
  background-image: url("beat-saber-intro.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

.row {
  padding-bottom: 10%;
}

.sketchfab-embed-wrapper {
  height: 100%;
  margin-bottom: 200px;
}

iframe {
  height: 100%;
  width: 100%;
}

header {
  height: 100%;
  min-height: 100%;
}

.center {
  text-align: center;
}


/* Menu*/

.img {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

#colorlib-main-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.99);
  z-index: 1002;
  text-align: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -moz-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -ms-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -o-transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-transform: scale(0.1);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  overflow-y: scroll;
}

#colorlib-main-nav .colorlib-table {
  display: table;
  width: 100%;
  height: 100%;
}

#colorlib-main-nav .colorlib-table .img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  opacity: 1;
}

#colorlib-main-nav .colorlib-table .img:after {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  content: '';
  background: rgba(0, 0, 0, 0.3);
}

#colorlib-main-nav .colorlib-table .colorlib-table-cell {
  display: table-cell;
  vertical-align: middle;
}

#colorlib-main-nav .colorlib-nav-toggle {
  position: absolute;
  top: 40px;
  right: 40px;
  padding: 20px;
  height: 44px;
  width: 44px;
  line-height: 0;
  padding: 0 !important;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  #colorlib-main-nav .colorlib-nav-toggle {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}

#colorlib-main-nav .colorlib-nav-toggle i {
  top: 18px !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0;
  text-indent: 0;
}

#colorlib-main-nav .colorlib-nav-toggle.show {
  visibility: visible;
  opacity: 1;
}

#colorlib-main-nav .colorlib-nav-toggle:hover i::before,
#colorlib-main-nav .colorlib-nav-toggle:hover i::after {
  content: '';
  width: 40px;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 0;
}

.menu-show #colorlib-main-nav {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

#colorlib-main-nav .logo {
  font-size: 40px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  line-height: 1.5;
  font-family: "Poppins", Arial, sans-serif;
}

#colorlib-main-nav .logo span {
  font-size: 14px;
  display: block;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 8px;
}

#colorlib-main-nav ul {
  padding: 0;
  margin: 0;
  display: block;
}

@media (max-width: 767.98px) {
  #colorlib-main-nav ul {
    padding: 20px 0 0 0;
  }
}

#colorlib-main-nav ul li {
  padding: 0;
  margin: 0;
  list-style: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 5px;
  text-transform: uppercase;
}

#colorlib-main-nav ul li a {
  display: block;
  color: white;
  padding: 5px 0;
}

#colorlib-main-nav ul li a span {
  color: white;
  position: relative;
  padding: 0 10px;
}

#colorlib-main-nav ul li a span small {
  position: absolute;
  bottom: 7px;
  left: -30px;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

#colorlib-main-nav ul li a:hover,
#colorlib-main-nav ul li a:active,
#colorlib-main-nav ul li a:focus {
  outline: none;
  text-decoration: none;
}

#colorlib-main-nav ul li a:hover span:before,
#colorlib-main-nav ul li a:active span:before,
#colorlib-main-nav ul li a:focus span:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

#colorlib-main-nav ul li.active a span {
  color: #f8b500;
}

#colorlib-main-nav ul li.active a span:before {
  background: #fec771;
  visibility: visible;
  -webkit-transform: scaleX(1);
  -moz-transform: scaleX(1);
  -ms-transform: scaleX(1);
  -o-transform: scaleX(1);
  transform: scaleX(1);
}

header {
  padding: 2em 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9;
  margin: 0 auto;
}

@media (max-width: 767.98px) {
  header {
    padding: 1em 0;
    position: absolute;
  }
}

header .colorlib-navbar-brand {
  float: left;
}

header .colorlib-navbar-brand .colorlib-logo {
  font-size: 12px;
  color: #fff;
  letter-spacing: 5px;
  font-weight: 600;
  position: relative;
  display: inline-block;
  margin-bottom: 0;
  line-height: 1.5;
  font-family: "Poppins", Arial, sans-serif;
  text-transform: uppercase;
}

header .colorlib-navbar-brand .colorlib-logo span {
  font-size: 11px;
  display: block;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 7px;
}

header .colorlib-navbar-brand .colorlib-logo i {
  color: #fec771;
  position: absolute;
  top: -18px;
  bottom: 0;
  left: 7px;
  font-size: 48px;
}

header .colorlib-navbar-brand .colorlib-logo:hover {
  text-decoration: none !important;
}

header .colorlib-navbar-brand .colorlib-logo:active,
header .colorlib-navbar-brand .colorlib-logo:focus {
  outline: none;
  text-decoration: none;
}

.colorlib-nav-toggle {
  cursor: pointer;
  text-decoration: none;
}

.colorlib-nav-toggle.active i::before,
.colorlib-nav-toggle.active i::after {
  background: #000;
}

.colorlib-nav-toggle.dark.active i::before,
.colorlib-nav-toggle.dark.active i::after {
  background: #000;
}

.colorlib-nav-toggle:hover,
.colorlib-nav-toggle:focus,
.colorlib-nav-toggle:active {
  outline: none;
  border-bottom: none !important;
}

.colorlib-nav-toggle i {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 2px;
  color: #000;
  font: bold 14px/.4 Helvetica;
  text-transform: uppercase;
  text-indent: -55px;
  background: #fff;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.menu-show .colorlib-nav-toggle i {
  background: #fff;
  color: #fff;
}

.colorlib-nav-toggle i::before,
.colorlib-nav-toggle i::after {
  content: '';
  width: 30px;
  height: 2px;
  background: #fff;
  position: absolute;
  left: 0;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.menu-show .colorlib-nav-toggle i::before,
.menu-show .colorlib-nav-toggle i::after {
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .colorlib-nav-toggle i::before,
  .colorlib-nav-toggle i::after {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}

.colorlib-nav-toggle.dark i {
  position: relative;
  color: #fff;
  background: #fff;
  -webkit-transition: all .2s ease-out;
  -o-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.colorlib-nav-toggle.dark i::before,
.colorlib-nav-toggle.dark i::after {
  background: #fff;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .colorlib-nav-toggle.dark i::before,
  .colorlib-nav-toggle.dark i::after {
    -webkit-transition: none;
    -o-transition: none;
    transition: none;
  }
}

.colorlib-nav-toggle i::before {
  top: -7px;
}

.colorlib-nav-toggle i::after {
  bottom: -7px;
}

.colorlib-nav-toggle:hover i::before {
  top: -10px;
}

.colorlib-nav-toggle:hover i::after {
  bottom: -10px;
}

.colorlib-nav-toggle.active i {
  background: transparent;
}

.colorlib-nav-toggle.active i::before {
  top: 0;
  -webkit-transform: rotateZ(45deg);
  -moz-transform: rotateZ(45deg);
  -ms-transform: rotateZ(45deg);
  -o-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
}

.colorlib-nav-toggle.active i::after {
  bottom: 0;
  -webkit-transform: rotateZ(-45deg);
  -moz-transform: rotateZ(-45deg);
  -ms-transform: rotateZ(-45deg);
  -o-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
}

.colorlib-nav-toggle {
  float: right;
  z-index: 1003;
  position: relative;
  top: 0;
  right: 0;
  display: block;
  margin: 0 auto;
  cursor: pointer;
  margin-top: 0;
}

@media (max-width: 767.98px) {
  .colorlib-nav-toggle {
    right: 10px;
  }
}

.hero-wrap {
  background: #202020;
}

.hero-wrap .slider-text .desc h1 {
  font-size: 6vw;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
}

.hero-wrap .slider-text .desc h3 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 18px;
}

<!-- Bootstrap CSS -->
<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">

<nav id="colorlib-main-nav" role="navigation">
  <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle active"><i></i></a>
  <div class="js-fullheight colorlib-table">
    <div class="img" style="background-image: url(images/bg_3.jpg);"></div>
    <div class="colorlib-table-cell js-fullheight">
      <div class="row no-gutters">
        <div class="col-md-12 text-center">
          <h1 class="mb-4"><a href="index.html" class="logo">Company Logo</a></h1>
          <ul>
            <li class="active"><a href="index.html"><span>Home</span></a></li>
            <li><a href="about.html"><span>About</span></a></li>
            <li><a href="blog.html"><span>Blog</span></a></li>
            <li><a href="contact.html"><span>Contact</span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

<div class="header h-100">
  <a href="#" class="js-colorlib-nav-toggle colorlib-nav-toggle"><i></i></a>
  <h1 id="h-100" class="introduction h-100">Virtual Reality</h1>

</div>

<div class="h-100">
  <h2 class="center">Was ist Virtual Reality (VR)</h2>
  <p class="center">Eine virtuelle Welt oder ein Computerspiel, in das der Nutzer mit Hilfe eines VR-Headsets vollständig eintauchen kann</p>
</div>


<div id="vr-headset-kategorien" class="">
  <!--Show each one as a full screen information - Picture or animation embeded at the left side - Text about it right-->
  <div id="standalone" class="row">
    <!---->
    <div class="vr-left_side container col-lg-6">
      <div class="sketchfab-embed-wrapper"> <iframe title="Quest 2 Headset - FanArt" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share
          src="https://sketchfab.com/models/ee496aa030bf4f37a52b445196796af3/embed?autospin=1&autostart=1&ui_hint=0"> </iframe>
        <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/quest-2-headset-fanart-ee496aa030bf4f37a52b445196796af3?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Quest 2 Headset - FanArt </a>          by <a href="https://sketchfab.com/josevillotguisan?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3" target="_blank" style="font-weight: bold; color: #1CAAD9;"> joseVG </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=ee496aa030bf4f37a52b445196796af3"
            target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p>
      </div>
    </div>

    <div class="vr-right_side container col-lg-6">
      <h3>Standalone</h3>

      <p>Standalone VR-Headsets ben&ouml;tigen nur WLAN und Strom. In der VR-Brille ist ein eigener Prozessor eingebaut. Damit ist dieser Art super f&uuml;r Anf&auml;nger geeignet</p>

      <p>
        Vorteile:<br /> Kein guter PC ben&ouml;tigt<br /> Niedriger Einstiegspreis trotz guter Hardware<br/> Gut optimierbar, da es für das Heaset nur einen Prozessor gibt</p>

      <p>Nachteile:<br /> Je nach Headset schlechte Performance bei fordernden Spielen</p>
    </div>

  </div>

  <div id="pc" class="row">
    <div class="vr-left_side container col-lg-6">
      <div class="sketchfab-embed-wrapper"> <iframe title="HTC Vive" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/4cee0970fe60444ead77d41fbb052a33/embed?autospin=1&autostart=1&ui_hint=0"> </iframe>
        <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/htc-vive-4cee0970fe60444ead77d41fbb052a33?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> HTC Vive </a>          by <a href="https://sketchfab.com/EternalRealm?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33" target="_blank" style="font-weight: bold; color: #1CAAD9;"> Eternal Realm </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=4cee0970fe60444ead77d41fbb052a33"
            target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p>
      </div>
    </div>

    <div class="vr-right_side container col-lg-6">
      <h3>PC-VR</h3>
      <p>PC-VR Headsets funktionieren nur zusammen mit einem PC. Sie werden &uuml;ber ein langes Kabel verbunden. Mit einem passenden PC kann ein PC-VR Headset ein extrem sch&ouml;nes Bild liefern. Der Einstiegspreis ist jedoch sehr hoch, daher sind sie
        vor allem f&uuml;r Enthusiasten geeignet</p>

      <p>Vorteile:<br /> Hohe Aufl&ouml;sung<br /> Wenig Lags</p>

      <p>Nachteile:<br /> Hoher Einstiegspreis</p>
    </div>
  </div>

  <div id="fulldive" class="row">
    <div class="vr-left_side container col-lg-6">
      <div class="sketchfab-embed-wrapper"> <iframe title="neuraLink" frameborder="0" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" allow="fullscreen; autoplay; vr" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share src="https://sketchfab.com/models/6a157c614d0641c2a2d2c7c7628fb01b/embed?autospin=1&autostart=1"> </iframe>
        <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;"> <a href="https://sketchfab.com/3d-models/neuralink-6a157c614d0641c2a2d2c7c7628fb01b?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> neuraLink </a>          by <a href="https://sketchfab.com/rfarencibia?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b" target="_blank" style="font-weight: bold; color: #1CAAD9;"> rfarencibia </a> on <a href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=6a157c614d0641c2a2d2c7c7628fb01b"
            target="_blank" style="font-weight: bold; color: #1CAAD9;">Sketchfab</a></p>
      </div>
    </div>

    <div class="vr-right_side container col-lg-6">
      <h3>Full-Dive VR</h3>
      <p>Tauche komplett in die VR-Welt ein. Full-Dive VR-Headsets befinden sich bereits in Entwicklung. Bei diesem Ansatz wird keine VR-Brille verwendet, die wie ein Monitor funktioniert sondern Full-Dive VR-Headsets greifen direkt auf die Seh-, Tast-,
        und weitere Nerven zu. Daher ist dies auch die umstrittenste Technologie</p>

      <p>Vorteile:<br /> Unvergleichliche Immersion</p>

      <p>Nachteile:<br /> Sicherheit - Z.B. In der VR-Welt einsperren - Unwahrscheinlich aber m&ouml;glich</p>
    </div>
  </div>

</div>




<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67385704

复制

相似问题

问为什么我的网站比窗口稍宽？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的网站比窗口稍宽？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我的网站比窗口稍宽？
EN