Question

我正在完成一个可在此处找到的网站 - www.minimindsacademy.com

我需要找到一种方法让高度占据iPhone设备的100％屏幕。它在我的iPhone上没有占据100％的高度，但在我的桌面浏览器上，即使我缩小它也是如此。该网站的目标是使用Twitter Bootstrap作为我的样式框架，100％响应。我不确定它是否在其他移动设备上执行此操作。此外，我无法在浏览器屏幕上复制此内容（当我尽可能缩小浏览器屏幕时，它看起来很好，但是在我的iPhone上，高度不是100％）。我不知道我是否做了些什么CSS或其他错误。

它不允许我在我的帖子上发布图片，但是如果您在移动设备上查看该网站，您应该会在主页上看到我所指的示例。

HTML：

<!DOCTYPE html>
<html lang="en">
    <!-- HEAD -->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Home</title>
        <link rel="shortcut icon" href="images/favicon.ico">
        <link rel="stylesheet" 
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" 
crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script src="script.js"></script>
</head>

<section class="hero">
    <!--Nav Bar-->
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-
toggle="collapse" data-target="#navbar" aria-expanded="false" aria-
controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
        <a class="navbar-brand" href="#">
          <img src="assets/logo.png" alt="">
        </a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="home.html">Welcome</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="staff.html">Staff</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

<div class="container">
    <div class="row">
      <div class="span4"></div>
      <div class="span4">           
        <a href="home.html" >
          <img id="logo" src="assets/logo.png" alt="logo">
        </a></div>
      <div class="span4"></div>
    </div>
</div>


<!--BOX START-->
<div class="container" id="box">
    <!--HEADER-->
    <!--<h1>Home</h1>-->
    <!-- CARASOUL -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->

      <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">
        <div class="item active">
          <img src="assets/home/1.jpg" alt="Chania">
          <div class="carousel-caption">
            <h3>Jammin Out</h3>
            <p>Piano at the mall!</p>
          </div>
        </div>

        <div class="item">
          <img src="assets/home/2.jpg" alt="Chicago">
          <div class="carousel-caption">
            <h3>Snack Time</h3>
            <p>Healthy eating for everyone!</p>
          </div>
        </div>

        <div class="item">
          <img src="assets/home/3.jpg" alt="Chicago">
          <div class="carousel-caption">
            <h3>Comfortable Environment</h3>
            <p>Hangin with my pal!</p>
          </div>
        </div>

        <div class="item">
          <img src="assets/home/4.jpg" alt="Chicago">
          <div class="carousel-caption">
            <h3>Arts and Crafts</h3>
            <p>Chalk is always fun!</p>
          </div>
        </div>

        <div class="item">
          <img src="assets/home/5.jpg" alt="Chicago">
          <div class="carousel-caption">
            <h3>Backyard Activities</h3>
            <p>Beep Beep!</p>
          </div>
        </div>

        <div class="item">
          <img src="assets/home/6.jpg" alt="Chicago">
          <div class="carousel-caption">
            <h3>Outdoor Fun</h3>
            <p>Hangin at the park!</p>
          </div>
        </div>
      </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-
slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
</span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel"  role="button" data-
slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
    <span class="sr-only">Next</span>
  </a>
</div>

    <!-- MAIN -->
            <div class="row">
                <div class="col-md-4" id="one">
                    <h3>About us</h3>
                    <p>Mini Minds Academy is here to provide a nurturing, 
safe and stimulating environment for children to explore, learn and play! We 
respect and value the diversity in each child's character, background and 
level of development.</p>
                    <a class="btn btn-primary pull-right" 
href="about.html">Read more</a>
                </div>
                <div class="col-md-4" id="two">
                    <h3>Meet our staff</h3>
                    <p>Our staff at Mini Minds academy consist of teachers 
Shelly Lenzotti, an alumni of Boise State University. She has over 13 years 
of experience in educating and caing for children ages 3 months - 11 years 
of age.</p>
                    <a class="btn btn-primary pull-right" 
href="staff.html">Meet us</a>
                </div>
                <div class="col-md-4" id="three">
                    <h3>Contact us</h3>
                    <p>If you are interested in our program and have a child 
between te ages of 1-6 years old feel free to contact us. We would be happy 
to provide for your child's needs if we have space available!</p>
                    <a class="btn btn-primary pull-right" 
href="contact.html">Contact us</a>
                </div>
            </div>

    </div>
</section>

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
</script>
<script 
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js">
</script>

</html>

CSS：

        .navbar-brand {
            padding: 5px 15px;
        }

        .navbar-brand img {
            height: 40px;
        }

        #headerTitle {
            position: relative;
            max-width: 75%;
            margin: 0 auto;
        }


        .carousel-control.left, .carousel-control.right {
            background-image: none
        }

        #myCarousel {
            margin-bottom: 20px;
        }

        section.hero {
            background-image: url("../assets/1.jpg");
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            width: 100%;

        }


        #logo {
            max-width: 400px;
            margin: auto auto;
            text-align: center;
            margin-bottom: 30px;
            width:100%;
        }

        .row .span4 {
            text-align: center;
        }

        #box {
            max-width: 75%;
            padding: 20px;
            padding-bottom: 100px;
        }

        .row {
            padding: 0px 20px 0 20px;
        }

        .col-md-8 {
            font-weight: bold;
            color: #717070;
            padding-bottom:20px;
        }

        .col-md-4 {
            font-weight: bold;
            color: white;
            padding-bottom:20px;
        }

        #about h5 {
            font-weight: bold;
        }

        #about2 {
            background-color: #945389;
            font-weight: bold;
            height: 100%;
        }

        #one {
            background-color: #ee4524;
        }

        #two {
            background-color: #a2c95c;
        }

        #three {
            background-color: #945389;
        }

        .btn-primary {
          color: white;
          background-color: #018ca9;
          border-color: #018ca9;
          width: 100%;
          margin: 0 auto;
        }

        .btn-primary:hover,
        .btn-primary:focus,
        .btn-primary:active,
        .btn-primary.active {
          color: white;
          background-color: #01778f;
          border-color: #01778f;
        }

        h1 {
            color:#945389;
            font-weight:bold;
        }

        @media only screen and 
          (max-width: 767px) {
              #box{max-width:100%;}
        }

我明白了，这是因为我正在使用go-daddy进行域名转发。掩码将代码转换为：

 <html>

<head>
  <title>minimindsacademy.com</title>

</head>
<frameset rows="100%,*" border="0">
  <frame src="http://www.ayodlomedia.com/miniminds/home.html" 
frameborder="0" />
  <frame frameborder="0" noresize />
</frameset>

<!-- pageok -->
<!-- 11 -->
<!-- -->
</html>

显然框架集标签与HTML5不兼容，因此，我假设错误来自哪里。

Answer 1

看起来你的英雄部分没有足够的高度来填满屏幕。如果将min-height：100vh添加到.hero类中，使背景填满屏幕。

这是你指的是什么？

iPhone /移动设备上的Bootstrap响应网格问题

1 个答案: