Question

这是一个450像素的包装div。如果我将高度设置为100vh，则标题的底部边缘应适应视口。

.title,
.subtitle {
  border: 1px solid #000;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 16%;
  height: 450px;
  margin-right: 42%;
  margin-left: 42%;
  border: 1px solid #000;
}

.title {
  margin-bottom: 1rem;
}

<div class="wrapper">
  <div class="title">Title</div>
  <div class="subtitle">Subtitle</div>
</div>

https://codepen.io/anon/pen/ZNoZVm

摘要：包装器中元素的边距应与视口成比例。

Answer 1

我不是100％理解（我知道，如果我不理解，我不应该回答），但可能是您试图说您希望包装纸的高度是视口的高度（屏幕高度）。

如果是这种情况，那么您做的一切正确，除了...

默认情况下，正文的边距为8px。您只需要将其删除，即可获得所需的结果。

body {
  margin: 0;
}

/* =================== */

.title,
.subtitle {
  border: 1px solid #000;
}

.wrapper {
  display: flex;
  flex-direction: column;
  width: 16%;
  height: 100vh;
  margin-right: 42%;
  margin-left: 42%;
  border: 1px solid #000;
}

.title {
  margin-bottom: 1rem;
}

<div class="wrapper">
  <div class="title">Title</div> 
  <div class="subtitle">Subtitle</div> 
</div>

（（如果您在漫游为什么仍然可以滚动的原因，是因为“边框”增加了高度（和宽度），所以如果边框的底部为3px，而高度为10px，则您的总体高度13px）

如何转换固定利润率百分比？

1 个答案: