I'm trying to get some graphical elements to function like a resizable Finder or Windows Explorer window... no different than the ones you open and close on your computer screens. The window is basically 100% of the viewport, but with 15px margins on every side of it.
Based on my coding here, .window is only adjusting to the size of the content within it, rather than filling up the viewport 100% with respects to the margins set. I'm a noob, but I feel like this has something to do with setting the body/head height/width to 100% as well. Either way, what am I doing wrong?
.window {
background:url("http://theinspirationgallery.com/wallpaper/ivy/images/wp_ivy_142.jpg");
width:100%;
height:100%;
margin: 15px 15px 15px 15px;
}
Here's a link to the JSFiddle: http://jsfiddle.net/kgT5T/
You can get the effect you're looking for by (ab)using absolute positioning.
Here is a JSBin demo: http://jsbin.com/jovutace/1/
The CSS is simply this:
html, body {
height: 100%;
width: 100%;
margin: 0; padding: 0;
}
.window {
background:url("http://theinspirationgallery.com/wallpaper/ivy/images/wp_ivy_142.jpg");
top: 15px;
left: 15px;
right: 15px;
bottom: 15px;
position: absolute;
}
The first CSS rule sets the size of the <html> and <body> elements to take up the full view port. The margin and padding declarations remove any browser-specific styles (though I recommend a full CSS reset, of course.)
The second rule sets the .window div to have absolute positioning, and then effectively tacks each side 15 pixels away from that edge.
I normally don't recommend using absolute positioning, but for whatever reason there's some strange behavior happening when you use relative positioning and height: 100%; width:100%; on the .window.
In the JSBin demo, I made the HTML background yellow for contrasting purposes so it's easier to see where the edges of the image are as you change the window size.