height: 100vh; and overflow content on smaller screens
If I understand correctly, you have multiple elements with height: 100vh, and the problem is that their content may overflow them.
In that case, you can
Use the
overflowproperty to handle overflow correctly.For example
overflow: autowill add scrollbars only when necessary.html,body {
margin: 0;
}
section {
height: 100vh;
overflow: auto;
background: yellow;
}
section + section {
background: lime;
}
div {
height: 150vh;
margin-left: 15px;
border-left: 1px dotted;
}<section>
Start<div></div>End
</section>
<section>
Start<br />End
</section>100vh cuts off content when window height is small
I think you may be misunderstanding the
vhunit. It refers to the height of the viewport (the inside of the browser window), not the height of the document.When the window (viewport) height is 300px, the
#section1element with the green background will also be 300px tall (since it's defined as 100vh).What's happening in your example is that the content inside of the
#section1element overflows the height of the#section1element, because the rest of the content is taller than your viewport. To fix this, I would recommend letting the#section1element grow if it needs to by usingmin-height: 100vhinstead ofheight: 100vhon it.Setting height:100vh vs min-height:100vh;
Without access to code, generally speaking, min-height is the minimum height an element can be, which therefore can be bigger but not (technically) smaller.
Height is the absolute height something should be. No bigger, no smaller (in most cases).
As you've used 100vh (100% of the viewports height):
height: 100vhThe HTML element will be exactly 100% of the browser windows size (not the size of the content or how long the page is).
min-height: 100vhThe HTML element will be at least 100% of the browsers height...but can be bigger.
Try using percentages or overflow to correct this if needs be. Overflow:auto on the element will mean the overflowing content will be scrolled within the the blue area. Height: 100%; should mean that the blue will appear across the whole page...but it depends on your code.
Why is this div with 100vh height not covering the whole viewport?
Viewport height just means that the height of the element will be a percentage of the viewport. The viewport being the window your viewing the page on. So if it is a 1920x1080 screen the viewport height will be 1080px or whatever your browser window is, it may be less if you have a toolbar at the bottom of your screen. The issue you are having is that if you want the sidebar to follow the main content down the page you need to disregard the viewport and have a wrapper around both of them like so:
.main-wrapper{
display:flex;
}
aside{
background:blue;
color:#fff;
width:200px;
}
main{
background:green;
height:5000px;
flex:1
}<div class="main-wrapper">
<aside>Your sidebar</aside>
<main>Your Main Content</main>
</div>min-height 100vh creates vertical scrollbar even though content is smaller than viewport
Adding flex-grow seems to do the trick:
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-around;
}https://jsfiddle.net/uxgaaccr/2/
Not sure why, but
height: 100%on.wrapperdoesn't seem to suffice, it needsflex-growinstead. I think there was some extra white-space coming fromjustify-content: space-aroundthat was adding to the height. Not confident in my reasoning, but it seems to work...Why 100vh is not taking the full screen?
Set position to fixed, add top:0; also height:100vh and left or right to 0 in the media query
Related Topics
Can You Blur the Content Beneath/Behind a Div
Css2 Attribute Selectors with Regex
Bootstrap Navbar Collapse Media-Query on Custom Width
Table Cell Loses Border When CSS Gradient Filter Is Applied in IE8
CSS Transition Does Not Work on Top Property in Ff
Changing <A> Link Underline Color
Css3 Transform Reverts Position: Fixed
Responsive Images Positioned Over Image
How to Combine Cursor: Not-Allowed and Pointer-Events: None;
Make Second Div Appear Above First, Without Absolute Position or Changing HTML
Position Element Over Background Image. But the Bg Img Changes Size with the Window. CSS
How to Define a Less Mixin to Generate a Transition-Property with a Variable Number of Parameters
Css: Fixed with Horizontal Menu, with Variable Width Tabs, Using Ul