Question

问题出在这里

我有多个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应该自动获取内容的大小。

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

Answer 1

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 =视口高度）。

Answer 2

根据您期望的结果，您可以执行以下操作：

.custom-container {
  display: flex;
  min-height: 100%;
  height: 100%;
  border: 1px solid black;
  padding-top: 61px;
  /// Add Overflow control
  overflow-y: scroll;
}

如何使用Bootstrap 4使div完全高或内容的高度

2 个答案: