如何使用 Bootstrap 4 制作 div 全高或內容高度

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%”，並將 min-height 聲明更改為“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;
}