时间戳

首页 > 解决方案 > 如何使用 Bootstrap 4 制作 div 的全高或内容高度

html - 如何使用 Bootstrap 4 制作 div 的全高或内容高度

问题描述

这是问题所在

我有多个 div 我想成为屏幕的高度。

我做到了，但我现在的问题是，即使我的内容比 div 大，我的 div 也不会停止调整大小。这个例子不言自明

html,
body {
  width: 100%;
  height: 100%;
}

.orange {
  color: #FF9800;
}

@media (max-width: 979px) {
  .custom-container {
    padding-top: 61px;
  }
}

.custom-container {
  display: flex;
  min-height: 100%;
  height: 100%;
  border: 1px solid black;
  padding-top: 61px;
}

.inner {
  padding: 5%;
  border: 1px solid white;
}

.container-fluid {
  overflow: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a id="logo" class="nav-link col col-md-2 orange">Label</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    	<span class="navbar-toggler-icon"></span>
  	</button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="col col-md-8 navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#services">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#photos">Photos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container-fluid h-100">
  <div class="h-100">
    <div id="services" class="custom-container justify-content-md-center">
      <div class="inner col-md-10 orange">
        not out of bound 1
      </div>
    </div>
  </div>
  <div id="photos" class="h-100">
    <div class="custom-container h-100 justify-content-md-center">
      <div class="inner col-md-10 orange">
        not out of bound 2
      </div>
    </div>
  </div>
  <div id="contact" class="h-100">
    <div class="custom-container justify-content-md-center">
      <div class="inner col-md-10">
        <div class="row orange">
         out of bound when screen size is small
        </div>
        <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
          a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
          tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
          euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
          vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
          Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
          tempus lectus et lobortis.
        </div>
      </div>
    </div>
  </div>
</div>

正如您应该在小片段的小窗口上看到的那样，文本超出了界限，所以当内容小于或等于全高并且如果内容大于全高时，我想要实现的是全高 div，那么我的 div 应该自动获取内容的大小。

这有可能做到吗？我这样做的总体方式是否正确？

标签： htmlcssresponsive-designbootstrap-4

解决方案

html,
body {
  width: 100%;
  height: 100%;
}

.orange {
  color: #FF9800;
}

@media (max-width: 979px) {
  .custom-container {
    padding-top: 61px;
  }
}

.custom-container {
  display: flex;
  min-height: 100vh;
  height: auto;
  border: 1px solid black;
  padding-top: 61px;
}

.inner {
  padding: 5%;
  border: 1px solid white;
}


.container-fluid {
   overflow-y: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a id="logo" class="nav-link col col-md-2 orange">Label</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    	<span class="navbar-toggler-icon"></span>
  	</button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="col col-md-8 navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#services">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#photos">Photos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container-fluid">

    <div id="services" class="custom-container justify-content-md-center">
      <div class="inner col-md-10">
       <div class="row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
          a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
          tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
          euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
          vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
          Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
          tempus lectus et lobortis.
      </div>
    </div>
  </div>
  
  <div id="photos">
    <div class="custom-container justify-content-md-center">
      <div class="inner col-md-10 orange">
        not out of bound 2
      </div>
    </div>
  </div>
  
  <div id="contact">
    <div class="custom-container justify-content-md-center">
      <div class="inner col-md-10">
        <div class="row orange">
         out of bound when screen size is small
        </div>
        <div class="row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
          a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
          tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris. Sed eu finibus lectus, mollis posuere lacus. Cras ullamcorper auctor hendrerit. Proin euismod metus sit amet mauris placerat
          euismod. Nullam venenatis sed mi at posuere. Phasellus felis quam, consectetur in vestibulum vel, posuere id dui. Pellentesque convallis viverra erat mattis vestibulum. Nam eros nulla, varius euismod lacus nec, vehicula dictum ipsum. Quisque
          vel justo non elit sodales pulvinar. Donec accumsan nisi efficitur augue consequat, in efficitur mauris rhoncus. Curabitur venenatis metus lacus, ac vestibulum massa euismod vel. In non erat enim. Aenean varius pellentesque tellus eu molestie.
          Sed at dolor justo. Integer interdum porttitor justo. Donec aliquet erat a consequat imperdiet. Phasellus tristique vel nunc eget consequat. Pellentesque posuere molestie placerat. Fusce egestas dignissim leo eu pellentesque. Vestibulum vehicula
          tempus lectus et lobortis.
        </div>
      </div>
    </div>
  </div>

我已经更改了代码，以便 div 获取内容的高度，如果它大于屏幕高度。只需将 .custom-container 的高度声明更改为“auto”而不是“100%”，并将最小高度声明更改为“100vh”。然后，您可以删除代码中的其他 h-100 类。

尽管 div 是块元素，但它的高度始终是其内容的高度。如果你想拥有一个全屏高度（即视口高度），你必须将 100% 更改为 100vh（vh = 视口高度）。

推荐阅读