Question Background:
I am looking into a sliding menu panel and have the following codepen to display this:
http://codepen.io/daveharris/pen/pEvEad
The Issue:
The <main> component has a slide-panel style applied to it which is the following:
#main {
background: red;
height: 100vmin!important;
}
In the mobile view the <main> component is not setting to a height of 100%, this is displayed with the use of a red background colour, as shown:
This height issue means that when the panel is closed, the underlying menu can be seen as shown:
I cannot work out why the styling of 100% is not fitting to the entire height of the mobile view?
Note I will be using this with an AngularJS project therefore I have two Divs which will wrap all of the contents, these are named as follows:
<div id="ui-view">
<div id"ResultsController">
Why will the height in mobile view not set to 100% height?
Right now #main height is the same as width value. On #main change to:
#main {
background: red;
min-height: 100vh;
}
It will fix your problem. min-height or just height. vh means viewport height, so it will cover all view.
When working with mobile it is best to work with vh , which is viewport height, and vw, which is viewport width.
For your element you'd want to do the following:
#main {
background-color: #ff0000;
min-height: 100vh; // vh = viewport height
Related
The blue div in this code has a height of 100vh whereas the red div has the height of 5000px. Shouldn't the blue div extend itself to cover the whole viewport because of the 100vh height attribute?
body {
margin: 0;
}
<div style="position: absolute; left: 35%; width: 100px; height: 100vh; background-color: blue;">
</div>
<div style="position: absolute; left: 50%; width: 100px; height: 5000px; background-color: red;"></div>
What I want to achieve from this is that suppose there's some text which overflows on sizing down the window then how should I get around that situation so that the 100vh height div again covers up the new window size?
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>
That being said you may want to check out the following fiddle Here. I have made this fiddle responsive for mobile screens so you may have to resize the output window larger to view the sidebar layout. The issue is you are absolutely positioning items and fixing items outside divs which is bad practice. In your example you commented on above you have many layout and z-index issues that you will run into. This fiddle is just an example but it should give you a good frame of reference on how the layout should be thought of.
It is happening because that's how vh works.
vh is based on the height of viewport. 1vh = 1% of viewport height.
https://www.sitepoint.com/css-viewport-units-quick-start/
1vh is Relative to 1% of the height of the viewport*
so 100vh will correspond to 100% of the height of the viewport
demo here
For further details please refer to the CSS Units documentation.
How do you fill the height when the website is zoomed 100%? When zoomed out i don't want the element to keep filling the screen. To be more clear, when a user enters the website and the website is zoomed by the default 100% the whole screen should be filled with a color. But when the user scrolls down or zooms the fill should not dynamically change its height.
From comments i edit the code to get a better result, but now there is gaps around the element:
header.mainHeader {
background-color: #282828;
width: 100%;
height: 100vh;
box-sizing: border-box;
}
First, you're setting the position: fixed of the .mainHeader class. This causes the element to always be at the same position in the viewport, regardless of zoom-level or scrolling position.
Remove this position: fixed, and its corresponding top and left properties.
You're currently setting the height to 100% of its parent element, so it would always be as big as that.
To set the height using the viewport's (visible page area) height, you can use vh units, equivalent to percentage of the viewport height (vh) - likewise for width and vw.
So, to set the height of the element to 100% of the viewport height, you can simply do:
height: 100vh;
EDIT - NOTE: the vh unit isn't supported by all browsers (I've found some, trust me). So I would recommend setting a fallback value, above the vh one, to prevent incompatibility. For example:
height: 500px; // fallback value if browser doesn't support vh
height: 100vh; // this value overrides the above one, if the browser supports vh
You might then need to remove padding and/or margin from the body or other elements, if you're seeing whitespace around the element. Have a play about to get the right effect.
For example:
body {
padding: 0;
margin: 0;
... other properties
}
Please find a JSFiddle of this in action: https://jsfiddle.net/s49p6Laj/
Sample code:
HTML
<div class="header">
I fill the viewport!
</div>
<div class="other-stuff">
// All your other content here...
</div>
CSS
// Set the body's margin and padding to 0
body {
margin: 0;
padding: 0;
}
// Make the container fill the viewport
.header{
width: 100%;
height: 100vh;
Check this FIDDLE
This is like a mobile phone prototype where I have fixed height of 50px for header-div and footer-div.
I want the content-div to dynamically adjust its height according to the main-container (which here is acting as mobile screen size). Adjust in such a way that the content overflow should be scrollable in the visible content-div height only.
If I put header-div and footer-div height both 10% and content-div height 80%. So that it arranges according to the screen size. Trouble here is that the header and footer heights will vary according to screen sizes and as a result will make header-div and footer-div bigger/smaller in height.
This is why I have set a certain height for header-div and footer-div both that is 50px. Now I want the content-div to be adjusted in such a way that it dynamically changes its height in accordance to the main-container (parent div)
Appreciate any help. Thanks.
I tried this and I am not sure if you would like it that way but here's what I've got for you...
Change your CSS code for main-container to this.
.main-container {
width: 420px;
height: auto;
background-color: #f7f7f7;
}
change your css code for main-container
.main-container {
width: 420px;
height: 1.2em; //change as per your requirements
background-color: #f7f7f7;
}
Web Style Sheets
CSS tips & tricks
I have to fit an iframe in screen height. Obviously, I wanted 100% as in width but, since that doesn't work, I used 100vh.
But vh like vw is not exactly 100%.
In my laptop through chrome while the 100% width renders perfectly without the need for a horizontal scroll bar, vw has about a centimeter extra.
vw and vh stand for viewport width and viewport height respectively.
The difference between using width: 100vw instead of width: 100% is that while 100% will make the element fit all the space available, the viewport width has a specific measure, in this case the width of the available screen, including the document margin.
If you set the style body { margin: 0 }, 100vw should behave the same as 100% (for an element that is a child to body).
Additional notes
Using vw as unit for everything in your website, including font sizes and heights, will make it so that the site is always displayed proportionally to the device's screen width regardless of it's resolution. This makes it super easy to ensure your website is displayed exactly the same in both workstation and mobile.
You can set font-size: 1vw (or whatever size suits your project) in your body CSS and everything specified in rem units will automatically scale according to the device screen, so it's easy to port existing projects and even frameworks (such as Bootstrap that already uses rem as unit for everything) to this concept.
Havenard's answer doesn't seem to be strictly true. I've found that vw fills the viewport width, but doesn't account for the scrollbars. So, if your content is taller than the viewport (so that your site has a vertical scrollbar), then using vw results in a small horizontal scrollbar. I had to switch out width: 100vw for width: 100% to get rid of the horizontal scrollbar.
You can solve this issue be adding max-width:
#element {
width: 100vw;
height: 100vw;
max-width: 100%;
}
When you using CSS to make the wrapper full width using the code width: 100vw; then you will notice a horizontal scroll in the page, and that happened because the padding and margin of html and body tags added to the wrapper size, so the solution is to add max-width: 100%
#Havenard's answer provides the perfect explanation for the question. Adding to that, this provides a visual representation of the difference.
You'll be able to notice the key difference between 100vw and 100% when you have a site with scrollbars and an element that is supposed to fit the entire width of the screen.
Option 1
Below is an example of the same.
All i'm doing in the code below is changing the width of <h1> tag from 100vw to 100% when you hover over it.
body{
/* margin: 0; */
}
.scroll{
height: calc(110vh);
}
h1{
width: 100vw;
/* width: 100%;*/
text-align:right;
outline: 5px solid black
}
h1:hover{
width: 100%;
}
h1:before{
content: "100vw "
}
h1:hover:before{
content: "100% "
}
<div class = "scroll">
<h1>Width</h1>
</div>
If you run the above code snippet and hover the text, you'll notice 2 things:
the horizontal scrollar disappears
the entire text will be visible
to you
Note: after running the above snippet, you can play around with above code in browser devtools to see how it affects the elements
Option 2 (Chrome and Edge)
.scroll{
height: calc(110vh);
display: flex;
align-items: baseline;
}
h1{
width: 100vw;
/* width: 100%; */
text-align:right;
outline: 10px solid black
}
<div class="scroll">
<h1>Test</h1>
</div>
Another way to visually see the difference in your own project is by setting a display:flex style to an element with 100vw.
When you highlight this elements in browser devtools, You can notice the a leftward point arrow at the right end of the element. Also you can see than the shading of the highlighted elements spans across the scroll-bar, indicating that it is considering the entire screen-width (including scroll-bar width)
Other questions, that address similar issue are:
100vw causing horizontal overflow, but only if more than one?
CSS Units - What is the difference between vh/vw and %?
Prevent 100vw from creating horizontal scroll
I'm trying to use a side panel with a width of 20% and a height of 100% so that they will re-size depending on browser width and height etc. I'm having a problem with the height (100%) part of the CSS, it doesn't seem to fit the entire height of the browser window though - it just displays 100% of what's in the side panel.
How can I make the side panel reach the bottom of the page no matter how much content is inside of it?
#sidebar{
float:left;
position: relative;
width: 20%;
height: 100%;
background-color: red;
}
Height 100% is always a pain.
Make sure that, html, body also have height: 100% and any div that's wrapping it.
When you set something with percentages, you must always consider "percent of what?" It's always the parent of the element. So what is the parent set to? If there is no defined height in units for the parent, percentage has no reference.
I had the same problem on a project I was working on, I fixed it thus:
#sidebar{
min-height:100%;
height:auto !important;
height: 100%;
//add other styling needed
}