简体繁体 English

何时使用vh和min-height：100vh

[英]When to use vh and min-height:100vh

原文 2017-03-27 15:05:01 1 1 html/ css

I have unintentionally been learning HTML in quirks mode, now that I have put <!DOCTYPE html> tag in, it's throwing off what I've learnt so far. 我已经无意地在怪癖模式下学习HTML，现在我已经放入<!DOCTYPE html>标记了，它已经摆脱了我到目前为止所学的内容。 At this point I'm struggling to understand using percentages for heights and when to use VH... 在这一点上，我正在努力理解使用百分比表示的身高以及何时使用VH ...

Here is a fiddle, along with some questions: https://jsfiddle.net/kittenslayer123/q9dm1zmu/4/ 这是一个小提琴，还有一些问题： https : //jsfiddle.net/kittenslayer123/q9dm1zmu/4/

My goal and thought process: 我的目标和思考过程：

1.Have body wrap around multiple sections - so I set body's min-height:100% 1.将身体包裹在多个部分上-因此我将body's min-height:100%设置body's min-height:100%

2.Each section is to be 100% of window - so I set .section height: 100vh 2.每个部分都将是窗口的100％-因此我设置了。部分.section height: 100vh

Each section should initially be 100vh but expand to wrap around contents - in this case .section-child. 每个部分最初应为100vh，但应扩展为环绕内容-在这种情况下为.section-child。
I want section to be 100vh and expand depending on content (section-child) - The way I set it, the 3rd section-child overflows onto the next section. 我希望部分为100vh，并根据内容（子部分）进行扩展-按照我的设置方式，第3子部分会溢出到下一个部分。

Can I set .section height to 100vh without using vh? 是否可以在不使用vh的情况下将.section高度设置为100vh ？ Why is my .section not expanding? 为什么我的.section没有扩展？ even though I have set min-height:100vh 即使我设置了min-height:100vh

I am really struggling to understand why or how to achieve this. 我真的很难理解为什么或如何实现这一目标。

1 个解决方案

Your section is not expanding because there is nothing in it. 您的部分没有扩展，因为其中没有内容。 Once you fill it with content it will expand (granted that it exceeds 100vh) 在您将内容填满后，它将会扩展（并保证超过100vh）