I tried using
height: 100%
but this makes the div only as high as its contents - it just contains a single word of text.
How can I force the div to use the screen height instead?
You need the body and html elements to have 100% height as well.
Try the following CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
YourDivSelector {
height: 100%;
}
The margin and padding must be set to 0 to prevent autoscroll in Firefox.
You should set all the containers that contain the div to height:100% as well, including the body and html tags.
You also need to set html and body to height:100%;
html,body{height:100%}
I had the same issue. Setting the html and body height to 100% didn't work, but when I combined min-height of 100vh and a height of 100% on the div it worked.
html, body {
height: 100%;
}
div {
min-height: 100vh;
height: 100%;
}
You can get the width and height of the window using JavaScript and then use those values to set the height and width of the div, as needed.
maybe
min-height:100%;
what are you trying to do exactly? post some more info and we can help you more
You can only meaningfully use height=100% if its containing element's height is definided. Its 100%, of what? no height if defined anywhere. You can use javascript to get the height of the current window (as previously mentioned), or specify a specific height of 800px or whatever value. :D
Related
I have a page with a lot of layers for the background (five layers) which should cover the entire page content (100% height and div).
Each layer has these properties:
position:relative;
width: 100%;
height:100%;
min-height: 100%;
These properties are OK if the page content is short: the divs have an height of 100% of the window, so it's ok.
The problem is when the page is longer (look the following example). The layers have a 100% height of the browser window, not the actual content height.
That's because (I suppose) of the height:100% property. Removing it, it's fine for long pages, but not for shorter ones.
JSFiddle: http://jsfiddle.net/cfMHm/
How can I fix this?
In the tag where your content is being displayed, you could add the CSS property overflow
http://www.w3schools.com/cssref/pr_pos_overflow.asp
You can use it to trim the excess content, or add a scrollbar.
EX.
.class {
overflow:auto;
}
what about scrolling the longer content
#actual_page {
width: 990px;
margin: 0px auto;
height:100%;
overflow:scroll;
background-color: pink;
}
fiddle here http://jsfiddle.net/Jammycoder/cfMHm/1/
Instead of
height:100%
You can try:
min-height: 50% (or whatever you need it to be).
See the cyan here:
http://jsfiddle.net/cfMHm/2/
Remove the height:100% from your layers CSS.
I would like to have a div by default 100% in height height: 100%;, but if there contents of the div don't fit, I want the div to dynamically expand.
The min-height property might be what you are looking for:
Assigning
min-height: 100%;
see https://developer.mozilla.org/en-US/docs/Web/CSS/min-height
to your div will make it have 100% of the height of its paremt-element.
So make sure that the surrounding elements (at least <html> & <body>) have 100% themselves:
html, body{
height: 100%;
}
You can also set the height to
height:auto; /* for IE as it does not support min-height */
min-height:100%;
on my css code I set the background-image:url with
height:100%;
but as a result, the range that the 100% capture is only the size of the screen.
if the page have a scroll, all the page line needed to be scroll doesn't appear to have those background.
Any suggestions?
NOTE: my element size changes dynamically.
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
This is, because 100% means 100% of your parent element. First of all, make sure your document is actually 100% of your browser window.
html, body {
width: 100%;
height: auto !important;
height: 100%; /* for older browsers */
min-height: 100%;
}
I need a div height changable if the screen size changes.
I also need that div is scrollable because the content may be Large.
But only when it is larger than the screen zize.
Also it should Work on IE6
Is there any Possibility for that?
If yes,
Please Give me the Complete css, html and javascript.
set width 100%; It's works
body {
width:100%;
height:100%;
}
#wrapper {
width:100%;
background:#ccc;
}
if the div is a direct child of body than just set height: 100% on both the div and the body. Like this:
body, #your-div-id {
height: 100%;
}
As far the scrillability is concerned just go:
#your-div-id {
overflow: auto;
}
Makes sense to you?
So, I am trying to set an image to be 100% of the height and width of the html element (really the browser window is what I'm going for). I have the CSS set as
html{
width: 100%;
height: 100%;
}
img{
width: 100%;
height: 100%;
z-index: 0%;
}
And the width behaves right, but the height does not change. I tried setting it to height: 2% and it stayed the same height. I don't want to use px to set the height because I want this to work on mobile devices, but HEIGHT, Y U NO WORK?
You also need to set height: 100% on body.
Going with your exact example, you could do:
html, body, img {
width: 100%;
height: 100%;
}
However, it looks like you're possibly trying to get a fullscreen background image (because you used z-index - by the way z-index does not use %, just a plain number).
In that case, you should instead use one of the methods from here:
http://css-tricks.com/perfect-full-page-background-image/
That is because the image element is not the direct child of the html element. You have to specify the height for the body element also, and any other element containing the image element.