Question

html部分（内容+上边距）应该占据整个视口。
除顶部外没有其他边距。该部分的内容不会很多这可以通过设置类似

的方式来实现

height:60vh
margin-top:40vh

但问题是，由于视口宽度变化或内容量
，截面高度可能会发生变化所以我需要一些解决方案来自动计算保证金。像margin-top这样的东西：100vh-height
上下文
在身体中有一堆直接位于垂直方向的部分，其中一部分应该像我描述的那样（水平线占vp高度的1/3 - 2/3，其中一些占用100vh并且没有垂直利润率身体有一个

display:flex;
flex-direction:column;

on

注释
我知道有可能做到 1）将所有内容包装在不必要的div级别中 2）使用js
但我想避免使用这些解决方案并尽可能简化html。所以我需要一种方法来计算保证金或css的其他变化来实现这一点（欢迎改变布局方法的建议（但只有css）欢迎）
clarifying image

body {  display:flex;  flex-direction:column;}
body > section {  min-height:vh;  margin:0; background-color: #e13652;}
.sectionHorizontal { min-height:10em; margin-top:60vh; }

<section class="sectionHorizontal">
    <p> horizontal section with some content, it should take part of a viewport and the rest should be filled by margin  </p>
</section>
<section>
    <p> another section. but this one takes 100% of viewport</p>
</section>
<section class="sectionHorizontal">
    <p> another horizontal section, that have more content and is higher than the first one</p>
</section>

更多笔记我问的不是如何制作100vh的部分，而是如何在它= 100vh之前制作部分+空格。或者如何在里面移动东西
我想保持示例尽可能简单，但实际上部分有背景，本身可能不仅包含一个

，而且还有几个有自己定位的不同元素

Answer 1

我仍然不确定我是否正确理解您的问题，但请看下面的内容。如果你能进一步澄清，这会有所帮助。

section {
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

section.horizontal {
    justify-content: flex-end;
}

<section class="horizontal">
    <p> horizontal section with some content, it should take part of a viewport and the rest should be filled by margin  </p>
</section>

<section>
    <p> another section. but this one takes 100% of viewport</p>
</section>

<section class="horizontal">
    <p> another horizontal section, that have more content and is higher than the first one</p>
</section>

Answer 2

假设您的示例代码，这是唯一可行的方式，而无需更改html。

* {
  margin: 0;
  padding: 0;
}

body {
  display:flex;
  flex-direction:column;
}

section {
  margin-top: 100vh;
  height: 0;
}

section p {
  background: #ccc;
  transform: translateY(-100%);
}

section:not(.sectionHorizontal) p {
  height: 100vh;
}

<section class="sectionHorizontal">
    <p> horizontal section with some content, it should take part of a viewport and the rest should be filled by margin  </p>
</section>
<section>
    <p> another section. but this one takes 100% of viewport</p>
</section>
<section class="sectionHorizontal">
    <p> another horizontal section, that have more content and is higher than the first one</p>
</section>

html / css如何计算margin-top为100vh - 块高度

2 个答案: