时间戳

首页 > 解决方案 > 全屏引导网页只占一半显示

html - 全屏引导网页只占一半显示

问题描述

我正在尝试创建一个非常基本的 CMS 版本，并且我正在使用一个提供 html 模板并允许用户创建自己的文本和图像上传以在其他地方的显示器上显示他们创建的屏幕的页面。

该模板有效，它存储了它应该存储的内容，但我的问题是：

当我将模板发送到它自己的网页以在另一个屏幕（电脑、电视、电话等）上查看时，整个页面只显示在屏幕的左半边，无论如何都是屏幕的一半。

为了安全起见，我尝试删除所有外部 CSS 和脚本，但这没有任何区别。唯一的区别是，我从模板页面中删除了包含页面上所有内容的全局导航菜单，但我只希望这个网页（使用引导程序 4 网格）填充页面

它在模板中的图片： 在此处输入图像描述

并生活： 在此处输入图像描述

我只想让页面的主体填满它是什么设备的整个视口，但它只是填满了一半，这很奇怪。我在这里做错了什么是痛苦的吗？

<!DOCTYPE html>
<html>
<head>
  <title>Template One</title>

  <style type="text/css">
    html,
    body {
      height: 100vh;
      width: 100vh;
    }

    .my-container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      width:100vh;
    }

    .my-container>.top [class^="col-"],
    .my-container>.bottom [class^="col-"] {
      background-color: #929292  ;
      color: white;
      text-align: center;
    }

    .my-container>.middle {
      flex-grow: 1;
      padding:30px;
      background-image: url('images/bg6.jpg');
      background-size: cover;
    }

    .my-container>.middle>* {
    }

    #clock{
        /*background-color:#333;*/
        font-family: sans-serif;
        font-size:40px;
        text-shadow:0px 0px 1px #fff;
        color:#fff;
    }
    #clock span {
        color:#fff;
        font-size:40px;
        position:relative;

    }
    #date {
      margin-top: -10px;
        letter-spacing:3px;
        font-size:20px;
        font-family:arial,sans-serif;
        color:#fff;
    }
  </style>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css" crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/css/gijgo.min.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gijgo@1.9.6/js/gijgo.min.js" type="text/javascript"></script>
  <script type='text/javascript' src='//cdn.jsdelivr.net/jquery.marquee/1.4.0/jquery.marquee.min.js'></script>

</head>
<body onload="startTime()">

<!-- Container -->
<div class="container-fluid my-container">
  <!-- Top Row -->
  <div class="row top">
    <div class="col-lg-12">
      <div class="row">
        <div class="col-lg-3">
          <img style="height: 100px;width: 250px;" src="/images/img.svg">
        </div>
        <div class="col-lg-6">
          <a class="weatherwidget-io" href="https://forecast7.com/en/35d16n84d88/?unit=us" data-label_1="" data-label_2="WEATHER" data-days="3" data-theme="original" data-basecolor="" > WEATHER</a>
        </div>
        <div class="col-lg-3 align-self-center">
          <div id="clockdate">
            <div class="clockdate-wrapper">
              <div id="clock"></div>
              <div id="date"></div>
            </div>
          </div>      
        </div>
      </div>
    </div>
  </div>
  <!-- Middle Row -->
  <div class="row middle">
    <div class="col-lg-6" >
      <div style="background-color: white; height: 100%;"><p>Left</p></div>
    </div>
    <div class="col-lg-6"  >
      <div style="background-color: white; height: 100%"><p>Right</p></div>
    </div>
  </div>
  <!-- Bottom row -->
  <div class="row bottom">
    <div class="col-lg-12">
      <div class="marquee"><h2>This is a test</h2></div>
    </div>
  </div>
  <!-- end container -->
</div>

</body>
</html>

标签： htmlcssbootstrap-4

解决方案

这可能是一个原因：

.my-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vh;      /* Problem here! */
}

widthandheight出于某种原因在此类中设置，这与类有关.container-fluid。并且您width设置为等于视口的高度。

此外，您的body:

width: 100vh;

您已将您body的宽度设置为视口的高度。将其更改为vw.

推荐阅读