What I want to do is setup multiple div's that each contain the contents of an entire page. Each div should be centered in the viewport and fill it entirely. Each successive div should be evenly spaced vertically based on the variable height of the viewport. For example say I have a view of 800x600 then each div should be this size and stacked. So, if I scrolled down exactly 600px I would only see page 2 div, 1200px I'd only see page 3 div. I don't have any code or example to share and my exhausted searches have turned up nothing of this sort. Is this possible with just css?
You simply have to give your html, body & divs a height: 100%;:
html, body {
height: 100%;
}
div {
height: 100%;
margin-bottom: 5px;
}
http://jsfiddle.net/KMMjv/
Because this would vary depending on the size of the user's browser window you would need to JavaScript to detect screen height and position them accordingly. Although you could set the height of each div with just CSS (height: 100%;) you would need to set the top with JS.
Here is a working JSBin: http://jsbin.com/ogokef/edit#preview
Use the following units:
vh for viewport height
vw for viewport width
html, body {
height: 100vh;
}
div {
height: 100vh;
width: 100%; /* you can use 100vw too, but for height it must be vh */
}
Related
Here is my site: http://highcatering.wpengine.com/
At the bottom of the site, there is an image of a bride sitting on a couch.
I want that image to keep its height and width. Here's an example: http://lydialavin.com/category/colecciones/
If you see, all the images there don't change size when the screen resolution is reduced.
Any suggestions?
If i understand your question correctly, you don't want the image to be smaller than a specific value. In this case, you should set a min-width pixel value on the element. Let's say 900px:
#novia img {
display: block;
float: none;
margin: 0;
padding: 0;
width: 100%;
min-width:900px;
background-position: center center;
}
and remove the overflow-x from its container:
#novia {overflow-x: hidden;}
This way, the background won't get as small as it does now when you see it on smaller screens. Please note, though, that the element will not be perfectly centered as it is now, and some portion of the image will not be shown.
Alternatively, you could give the image a fixed value, but it wouldn't be as effective, as it would probably be too big for smaller screens.
This css will fix the width and height of you bgackground
<style>
.your-img{
background:url(img/bg.jpg) no-repeat center center fixed;
}
</style>
I am trying to make an image resizable.
I have a specific height for this image: height: 100% (inside a container) and a width: auto; (i want the width to be adapted to the height about the natural image size).
Everything works fine when i access the page, but when i resize the window, the height is correctly resized, but the width keeps its initial value, i want it to be proportional (like when i access the page for the first time) to the height.
Is there a way to do it in CSS ? If not, what is the more optimize solution ?
Here is an illustration in code:
HTML
<div class="container">
<img alt="test" src="/img/test.png">
</div>
CSS
.container {
height: 100px;
width: 100%;
}
.container img {
height: 100%;
width: auto; //i need it to be adapted to each height about the natural image's dimensions
}
UPDATE
Here is a jsfiddle
http://jsfiddle.net/CRGj6/1/
Sometime it works sometime it doesn't...
window resize affects only the width of the element but not the height. It is kinda make sense because if you resize the height, more content is scrollable that means don't do anything to width but to increase the scrollbar length (so more content to be scrolled). Assuming that you want to preserve the aspect ratio of the image,
.wrapper .container img {
position: relative;
height: auto;
width: 100%;
}
would be the solution to this problem.
My question is almost identical to part of this question, yet it did not lead me to a solution. How do I center my page while making my header take the full width of the browser window?
Using the following css snippet my page is perfectly centered in the viewport as the browser window changes size, however I want the header image to remain in the same position, flush against the left hand side of the viewport, no matter what the viewport window width is.
#page{
margin-left: auto;
margin-right: auto;
width: 1024px;
}
#header {width: 1200px;
}
put your #header outside your #page and set margin-left and margin-right to auto
I would like to scroll within a div whose height extends below the browser window without scrollbars appearing on the browser window.
When I add an overflow:hidden style on the body tag this works as long as the div height is < the window height. How can I get the same effect when div height > browser window height?
Is the div height greater than the window height because you have set it that way in css or is there just a lot of content inside the div?
If you have already set its height in css, you might have to wrap it in another div first. Otherwise, try this:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div {
height: 100%;
width: 50%;
overflow-y: scroll;
}
Example
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.