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?
Asked
Active
Viewed 3,388 times
0
-
Possible duplicate of [For div to extend full height](https://stackoverflow.com/questions/4535983/for-div-to-extend-full-height) – random_user_name Jul 23 '17 at 22:25
2 Answers
1
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.
Johannes
- 64,305
- 18
- 73
- 130
-
I love vh and vw only problem I have about it is support. https://caniuse.com/#search=vh for some it might be enough but usually some project require more support. – Tom Jul 23 '17 at 22:07
-
Concerning the mentioned "caniuse" page: IE and Edge are only lacking the support for `vmax`, but not for `vh` and `vw`. And concerning Opera Mini: Click on the Header in this column... – Johannes Jul 23 '17 at 22:18
-
You should know better than to answer duplicate questions. Be a good steward of SO and vote to close as duplicate. – random_user_name Jul 23 '17 at 22:25
0
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.
Tom
- 349
- 1
- 7
-
-
you could do body {height:100%;width:100%;} .full-screen-section {width:100%; height:100%;} this should be working fine, not sure why downvote though – Tom Jul 24 '17 at 09:24
-
Thank you, I didn't vote not sure how that's voted down. I can't vote because don't have 15 points. Sorry, about that. – Abd Ur Rehman Jul 26 '17 at 06:55