将页面的一部分拉伸到最大高度

Question

I was wondering how can I stretch a section of the page to full height and width? Like a full-screen section 100% percent of the window. Well not if you resize it but of your maximum height. I can't find out how to do that. How do I do?

Answer 1

You should set height to your body to be 100% and then set the height of the section you want to be 100% height, this should result in that particular section to take the full height of browser. Also add width 100% to both body and section if you want full width as well.

Answer 2

Use this CSS for the section:

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

The vh and vw units are actually percentages of the viewport width and height, but other than regular percentage values, they are not relative to the parent element, but only to the viewport itself.