Question

我在这里有这个代码模板，我想让中间列的面板在可见页面的全高度。关键字'可见'页面。然后我想将按钮放在该面板的底部，而其余的面板元素位于顶部。

我尝试将div设置为'height：100vh'，但它使div高于可见页面。我不知道为什么，也许它与顶部的导航栏有关？

理想的效果是，无论页面大小如何，我都会看到页面底部的按钮。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
  </style>
</head>

<body>

  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>
        <a class="navbar-brand" href="#">Logo</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#">Messages</a>
          </li>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <div class="form-group input-group">
            <input type="text" class="form-control" placeholder="Search..">
            <span class="input-group-btn">
            <button class="btn btn-default" type="button">
              <span class="glyphicon glyphicon-search"></span>
            </button>
            </span>
          </div>
        </form>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#"><span class="glyphicon glyphicon-user"></span> My Account</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <div class="container text-center">
    <div class="row">
      <div class="col-sm-3 well">
        <div class="well">
          <p><a href="#">My Profile</a>
          </p>
          <img src="bird.jpg" class="img-circle" height="65" width="65" alt="Avatar">
        </div>
        <div class="well">
          <p><a href="#">Interests</a>
          </p>
          <p>
            <span class="label label-default">News</span>
            <span class="label label-primary">W3Schools</span>
            <span class="label label-success">Labels</span>
            <span class="label label-info">Football</span>
            <span class="label label-warning">Gaming</span>
            <span class="label label-danger">Friends</span>
          </p>
        </div>
        <div class="alert alert-success fade in">
          <a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
          <p><strong>Ey!</strong>
          </p>
          People are looking at your profile. Find out who.
        </div>
        <p><a href="#">Link</a>
        </p>
        <p><a href="#">Link</a>
        </p>
        <p><a href="#">Link</a>
        </p>
      </div>
      <div class="col-sm-7">

        <div class="row">
          <div class="col-sm-12">

            <div class="panel panel-default text-left" style="height:100vh">
              <div class="panel-body">
                <p contenteditable="true">Status: Feeling Blue</p>
                <button type="button" class="btn btn-default btn-sm">
                  <span class="glyphicon glyphicon-thumbs-up"></span> Like
                </button>
              </div>
            </div>
          </div>
        </div>


      </div>
      <div class="col-sm-2 well">
        <div class="thumbnail">
          <p>Upcoming Events:</p>
          <img src="paris.jpg" alt="Paris" width="400" height="300">
          <p><strong>Paris</strong>
          </p>
          <p>Fri. 27 November 2015</p>
          <button class="btn btn-primary">Info</button>
        </div>
        <div class="well">
          <p>ADS</p>
        </div>
        <div class="well">
          <p>ADS</p>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

Answer 1

是的，正如你已经说过的那样，导航栏就是问题＆＃34;这里。

如果您尝试从面板的所需高度减去导航栏高度，它应该可以工作：

element.style {
    height: calc(100vh - 100px);
}

在bootstrap col中创建一个div全高，并将按钮放在它的底部

1 个答案: