On my page, I want to make the body be at least 100% of the viewport (i.e. when the content is very less) but take on the height of the content as content increases.
Right now I have done
html{height:100%;}
body{height:100%;}
But with this, if the content increases, then body remains 100% of viewport height only and does not take the height of the content.
How to solve for this?
body { min-height: 100vh; } is all you'll need.
html {
height:100%;
}
body {
min-height:100%;
overflow-y:auto;
}
This should be work.
What you can do with css is to use “vw” unit. Just set body’s , width, height, min-width and min-height to 100vw/vh correspondingly; also you can give “box-sizing” : “border-box” which should include margin and paddings in the width and height
2.If you are not happy with the css results, you can always use javascript. You must write a function which will give viewport width and viewport height to body’s with and height,
With jquery you can do it like
$( window ).width();//documents width
$( document).width();//documents width
Same should work with height, call this function when document is ready
Related
I'm confused as to what making a html element "height: 100%;" does exactly.
I've made both html and body 100% height
I've added a few 100% height sections inside
The content displays correctly.
But then I looked at the page with Inspect Elements and I noticed that even though the contents displayed are above 100vh, the html, the body and the wrapper are all exactly 100vh.
Is this normal behaviour? Should I refrain from changing the height of the html and body element unless I want a site that's strictly 100vh?
height is always relative to its parent.
If you have html's height as 100vh, and then body as height: 100%, then body will also be 100vh, because body's parent is html, and the height is always relative to its parent.
The 100% is covering 100% of the parent. What the % corresponds to is determined by what modifier it is included with. If a height is set to 100% it will scale linearly with vh. If a width is set to 100% it will scale with vw. So yes, it is normal to see 100% height correspond to 100vh;
The vh unit means "Viewport Height". Setting the html or body height to 100vh is essentially redundant since a page will always want to fit within the height of the viewport in the first place.
Should I refrain from changing the height of the html and body element
unless I want a site that's strictly 100vh?
I can't think of any scenario where you'd want to set the html or body height at all. It is much more common to set the height of elements "within" the body, not the body itself.
I want to make <body> with 100% of the page height.
When I use 100% or 100vh on both <html> and <body>, they don't extend when the page content overflows the viewport.
html {
height: 100%;
}
body {
height: 100%;
}
When I use min-height: 100%; for <body> instead of height: 100%;, it does extend, but then I cannot use percentage height for divs inside the body, since the body does not have the height set.
How to make the body "infinite" and still be able to use divs with percentage inside it?
What you want isn't possible and more precisely not logical. let's ask a trivial question:
What will define the height of the body?
1) you want your body to be height:100% of the screen: You can either use a cascading height:100% or height:100vh and your body will have an explicit specified height thus you can use percentage height inside it but the body won't grow more than 100%.
2) you want your body to be min-height:100% of the screen: You can use either min-height:100vh or min-height:100% while having height:100% set to html. In this case, the content of the body will define the real height as you simply added a min-height constraint. If you have a lot of content, the body will grow beyond the 100% limit, if not you will have it at 100%. In this situation, it's clear that the content cannot use percentage value within height since the content is defining the body height.
You can have either (1) or (2) but you cannot have both since there is no logical way to define a min-height to the body, allow it to grow (depending on its content) and allow its content to use percentage values within height.
My website is divided into three div's left, middle and right. I want to set the height of the left one to the height of the screen using viewport height property.
My code is
#left
{
height:1vph;
}
But this is not working. Please help me in doing this.
There is no vph height unit, I think you are looking for the vh unit. See the valid CSS length values on MDN.
Try using the value 100vh, a value of 1 will only be 1/100th of the screen.
#left
{
height:100vh;
}
You can set the viewport height (vh) of a selected div or tag ..
Let us we want to set the body element as a viewport height.Then You have to use
body{
height: 100 vh;
}
Hope, It works. Thanks
Can anyone explain to me why my HTML page is not filling the height of the screen? I tried to set the min-height in the css but it's not really affecting anything.
JSFiddle: http://jsfiddle.net/9yFKn/
It's because you're not accounting for the height of the body.
Just add
body{
height: 100%;
}
http://jsfiddle.net/9yFKn/1/
Here is the solution :
html, body { height: 100%; }
but it just a solution you need to understand why is happened , this happened because your element is a block level element which wrap up your whole content width and height width as a 100% but this is not the case with height you need to specify the related to content to give a height in percentages like as above body has given 100%
here is the solution too
Alrighty,
I'm going to try to explain what I have going on. Let me know if you need more information.
Basically, I have a div container, and I have it styled at height:100%; It will do 100% but it will only be 100% for the current browser/window size.
For example: if I maximize the browser, the container will do 100%, but if I scroll down, that container's height only goes as much as whatever the browser height was.
Another example: if I minimize the browser to a certain size and refresh the page, the container will go 100% again to the window size only. So if I maximize the browser, the height container will still be the same height has if the browser was minimize.
So if I have a long page, the container doesn't go all the way down to the page, the container only goes so far as the window's height size when the page loads.
I'm trying to get the container to go all the way 100% till the bottom of the page, even if I have a footer or header, the container should be 100% between the two.
So I'll try to post up the most relevant code:
body,html
{
display:block;
position:relative;
}
#container_100percent
{
overflow-x:hidden;
position:relative;
overflow-y:auto;
width:20%;
min-height:100%;
height:100%;
float:right;
}
<div>
<div id="container_100percent">
<!-- some stuff !-->
</div>
</div>
The height of 100% is the height of his parent.
This means: if the parent div-container has no height, the height will be set to 100%, too and same for body. This is why your div has the height of your window.
So you need to give your div wrapper a height and the inner div will take on this height.
If you want the container to be as high as its contents, don't set the height property. It's as simple as that.
If, however, you want it to have a minimum height (i.e. you never want to let it be less high than the window) set the min-height property.