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%;
}
Related
Edit: For the sake of simplicity, I reduced my problem with overlay (see Background below) to width of a div. By doing that I however created a different and somewhat artificial problem. The accepted answer solves my real problem. The "reduced" problem is not solved there.
How can I make div with width equal to 100% of the page width? (without setting fixed min-width)
Seemingly, the solution is trivial. <div> with its 100% width should be OK by itself. That works fine unless you shrink the browser window below the page width (that's when scroll bars appear). Then the width of the <div> element is equal to the window size, not to the page size.
A note on the demonstration code: The first div simulates the page width. The divs below are my attempts to achieve an element wide across all page. If the page is big enough (more than 500px), they are rendered as expected - all over the page. But if you shrink the window (below 500px) and scroll bar appears, then the divs also shrink, although I want them to stay at 500px.
Here's the code, or check it out on jsFiddle if you prefer
/* just to see sizes of the elements */
div {
border: 1px solid red;
}
/* this simulates the width of the actual page content */
div#fixed {
width: 500px;
}
div#full1 {
width: 100%;
}
div#full2 {
width: 100%;
min-width: 100%;
}
div#full3 {
position: relative;
display: inline-block;
width: 100%;
}
/* this works fine, but uses fixed size min-width, I cannot use */
div#fullOK {
width: 100%;
min-width: 500px;
}
<div id="fixed">Width fixed to 500px</div>
The DIVs below are attempts to achieving 100% width despite scrolling. All work only if the window is wider than 500px.
<div>default</div>
<div id="full1">just width 100%</div>
<div id="full2">width and min-width 100%</div>
<div id="full3">run out of ideas</div>
<br>
<br>
<div id="fullOK">fixed min-width is the only thing that works (unusable for me though)</div>
Background: I have a page, which has an editor area that can be resized by the user. It has a modal dialog windows support, which - when invoked - shows a window and covers the rest of the page by a semi-opaque background with height and width set to 100%. It works well, unless it is viewed in window smaller than the page. Then scrolling shows part of the page not covered by the background, which looks ugly. I need to have this background spanning all over the page, not just over the visible area. Setting min-width and min-height could be done only with the help of JavaScript (due to unknown page size, as the user can resize the canvas) and I'd prefer avoiding that.
Use position: fixed for the overlay. The scrolling doesn't matter as elements that are fixed will position themselves in relation to the viewport. height: 100% and width: 100% will keep the overlay over the entire page no matter what you do.
From the MDN (emphasis mine):
fixed
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. [...]
CSS / HTML / Demo
* {
margin: 0;
padding: 0;
font-size: 1.5em;
}
body {
background: white;
}
.cover {
position: fixed;
height: 100%;
width: 100%;
background: rgba(255, 0, 0, 0.7);
}
<div class="cover"></div>
<h1>I am overlapped!</h1>
<input type="text" value="cant touch this" />
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.
Try this:
html, body {
height: 100%;
}
#container {
float: left;
width: 50px;
height: 100%;
}
You get container to use all height, but if you resize the window to 50% for example and reload the page, and once is loaded you resize the window to use the whole size the extra space is not used by #container (in this case will be using 50% of the total window size).
What's the best way to fix this and if posible using only css?
It is supposed to work :
http://jsfiddle.net/AhFnS/
Maybe you have an element containing your #container
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.
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