Question

我需要设置元素的高度以适应显示的高度。我尝试了几件事，但似乎没有任何效果

请。看到最后的 css，我试图根据答案调整它，但仍然没有帮助。我的身高仍然很小。尝试了 safarich、chrome

<div id='viewer'></div>
         <meta name="viewport" content="width=device-width, initial-scale=1">
        </div>

我试过了

height=device-height
height:100vh;
height 100%;

我的 css

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px; /* Vertically center the text there */
}

html, body {
  height: 100%;
  margin: 0;
}
#viewer {
  height: 100%;        
  margin: 0 auto;     
  background: yellow; 
}

Answer 1

放这一行

<meta name="viewport" content="width=device-width, initial-scale=1">

在您的 <head> 部分

那么，<body> 中的第一个 div 必须是“查看器”。使用这个css

html, body {
  height: 100%;
  margin: 0;
}
#viewer {
  height: 100%;        // or 100vh;
  margin: 0 auto;      // div will center if you give div a width
  background: yellow;  // test color
}

<body>
<div id="viewer">
<!-- other stuff of your page -->
</div>
</body>

更新。您确实在评论中询问了更具体的 css，更像是您在问题中提供的 css。如果不知道 html，这很困难，但就常见的事情而言，您可以使用下面的代码段。

/* full height viewport */

html, body {
  height: 100%;
  margin: 0;
}
body {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
}
@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}
#viewer {
  position: relative;
  min-height: 100%;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 60px;
  background-color: #ffc;
}

/* nav-pills */

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

/* common stuff */

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* footer */

.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
}

<div id="viewer">
<!-- all other stuff from your body section here -->
</div>

Answer 2

您可以在 CSS 文件中添加以下内容：

#viewer{
  height: 100vh;
  width: 100vw;
}

这会将 div 命名为带有 id="viewer" 的完整视口高度和宽度

设置元素的高度

2 个答案: