Ok so I am making my first iOS HTML5 app and it is just a simple quote app. I need to figure out how to make my container div be the full height of the iphone. Here is a jsfiddle of my design - http://jsfiddle.net/gKaDL/1/
.container {
width: 640px;
min-height: 100%;
background-size: cover;
background-position: center;
background-color: #1a1a1a;
}
Because a lot of the quotes are short the container div will not reach the iPhone 4 screen height of 960px let alone the iPhone 5's 1136px height. The container div must be the size of the screen or larger as there is a background image on it that must fill the screen.
Thanks.
You have either the CSS unit vh that is in centieth of viewport height. In which case you would write:
height: 100vh;
Or you can force the div to stick to top and bottom of the closest positioned parent (so give position:relative or position: absolute to a parent that has the appropriate height):
position: absolute;
top: 0;
bottom: 0;
tell me if you need more details
div{
margin:0px auto;
width:100%;
height:100%;
}
Related
I'm designing a simple website in HTML and CSS but got stuck. I'd like my website to have an image at the top. Any content that comes after that image should appear underneath the image, not on top of it (like it does with a background image). The image should be 0.6 (or some other fraction) the height of the viewport and centered. Any overflowing part should be cropped. However, in case the image is too narrow, it should be resized to fill the whole width of the viewport. It should never change its apect ratio. I'd also like to keep my site script-free and would like to have no absolute values (like px) in my source files.
Here are some doodles I made to explain my idea:
Image height is set to 0.6vh. It is centered. The overflowing areas are cropped. Text starts at the bottom.
Image height would be set to 0.6vh but it wouldn't cover the whole viewport's width. Instead, set the image width to match the viewport width (equal to the width of the page), ignoring the 0.6vh rule. Text still starts at the bottom.
I've been searching the internet for two days already but I couldn't really find quite what I need.
Additionaly, I am trying to solve this problem: currently, I am using vh to set the height of the image, but it gets weird when viewing on a mobile browser, because the value of vh changes when the address bar collapses.
[EDIT]
Rule:
The minimum width of the image should be the width of the viewport.
Then, if it's possible, it's height should match 0.6vh.
[EDIT 2]
I noticed that the answers work great by centering an image and keeping it's aspect ratio. But the image shouldn't be cropped vertically.
Another doodle:
I hope this doodle makes it easier to see what I am trying to achieve. Red line indicates the "0.6vh rule" while blue line represents the "mininimal width equals viewport width" rule. Green rectangle shows where the image should be.
[EDIT 4]
I added an image and some comments to the previous image:
Rather than using an image tag, try setting its properties in CSS. It's easier to maintain aspect ratio and centering this way. You may also want to specify a minimum and maximum height property to ensure things look nice.
body{
margin: 0; /* Stripping out margin and padding so .bg can be full width*/
padding: 0;
}
.bg {
box-sizing: border-box;
display: block;
width: 100%;
height: 60vh; /* 60vh = 60% of the viewport height*/
padding: 0; /* No padding */
margin: 0; /* No margins */
background-image: url('http://www.naturheilpraxis-kaelin.ch/bilder/fruehling-01.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover; /* Cover all available space. */
/* If you want the whole image visible try 'contain'*/
}
.main{
padding: 0 1em; /* L/R padding to look nice */
}
<body>
<div class="bg"></div>
<article class="main">
<h1>Your rad site</h1>
<p>Notice how the image is centered and it keeps its aspect ratio.</p>
</article>
</body>
[EDIT]
Okay! So here's the best I can do.
This doesn't crop anything vertically and there's no JS or hard values
BUT you do have to use an aspect ratio media query that you need to figure out based on your image.
This is the formula for the aspect ratio media query
Where H = image height, W = image width and D = percent of the viewport used (expressed as a decimal).
H / (W / (D))
For example, the image I used is 1000px x 300px. We're using 60% of the viewport so D = .6.
So 1000 / (300 / (.6)) >> 1000 / 500 >> 2/1 ratio.
body,html,.container{
margin: 0;
padding: 0;
}
.container {
position: relative;
overflow: hidden;
height: 60vh;
}
img {
position: absolute;
/* Position the image in the middle of its container. */
/* Hack*/
top: -9999px;
right: -9999px;
bottom: -9999px;
left: -9999px;
margin: auto;
min-height: 100%;
height: 100%;
}
#media only screen and (min-aspect-ratio:
2/1) {
/* Aspect ratio determined like so -- H / (W * (10/6)) */
.container img{
position: relative; /*Undoing the hack basically*/
right: auto;
top: auto;
left: auto;
bottom: auto;
width: 100%; /*rather than the width get cropped, it's full. height is auto*/
}
.container {height: auto; /* the image height determines the height */}
}
<div class="container">
<img src="http://placehold.it/1000x300" alt="" />
</div>
Make it full page and resize the browser to see how the image adapts.
I really hope that helps!
How about an approach like this:
body,html {margin: 0;padding: 0}
* {box-sizing: border-box}
/*For the demo I've made the height below 30vh, you can change that to 6vh*/
/*Use background-size contain, if your image's height is larger that width*/
.Image-Banner {width: 100%;height: 30vh;background: url('https://i.stack.imgur.com/sj9LO.png') no-repeat 50%;background-size: cover}
.Main-Content {padding: 1em}
<body>
<header class='Image-Banner'></header>
<main class='Main-Content'>
<div>Foo Bar</div>
<hr>
<aside>Lorem Ipsum...</aside>
</main>
</body>
Note: Click Run Code Snippet to see the result.
This should do exactly what you are asking for, I believe.
Created an example based on your information:
[Example][1]
[1]: https://jsfiddle.net/2Lke94qn/1/
Let say that we have two divs:
<div class="top">Top</div>
<div class="bottom">Bottom</div>
Try this style:
html, body{
height: 100%;
}
.top{
width: 100%;
height: 60%;
background-image: url("http://www.planwallpaper.com/static/images/HD-Wallpapers1.jpeg");
background-position: center;
}
.bottom{
background-color: grey;
height: 40%;
}
I really cant get this image to stretch 100% horizontally with a fixed height. I don't care about distortion, because it's just a svg pattern. I've tried both with an img-tag and a div, with the svg as background, but nothing seems to work. What i got right now is this:
.divider{
width: 100%;
height: 50px;
position: absolute;
left: 0;
bottom: 0;
background: url(../images/wave.svg);
background-repeat:no-repeat;
background-size: auto 50px;
}
<div class="divider"></div>
EDIT:
Screenshot for clarification
use
height:100vh;
its for vieport height.
there is also vw for vieport witdth.
but watch out especially ios cant handle it.. so for ios devices set a fixed height.
some further informations about vh
can i use vw, vh?
greetings timotheus
You won't be able to accomplish this without distorting the image. The only way to create the "appearance" of this, would be to allow the image to scale horizontally and use the containing element to dictate the maximum height, eventually leading to cutting part of the image off.
EDIT:
In lieu of the op wanting distortion, the best method is to set background-size with width 100% and fixed height of 50px
Fiddle: https://jsfiddle.net/2hu74z8k/
<div class="image-height-fixed"></div>
.image-height-fixed {
width: 100%;
min-height: 50px;
max-height: 50px;
background-image: url(https://placeholdit.imgix.net/~text?txtsize=13&txt=500%C3%9750&w=500&h=50);
background-size: 100% 50px;
}
This should do it:
background-size: 100% 50px;
EDIT: PimBrouwers beat me to it.
I cannot get positioning, max-width, and 'right: 0px' to work together in harmony! I'm creating a div that is fixed on my site in the upper right corner. The content of the page has a max-width of 1000px, however the label only obeys my rule of 'right: 0px' and sticks to the right, disobeying once max-width has been reached. It should also be noted that by default, the div is in the upper left and obeys the max-width (if I type 'left: 0px;' though, it does not obey the rule and it sticks to the left).
CSS:
#content {
margin: 0 auto;
max-width: 1000px; }
#div {
width: 150px;
position: fixed;
right: 0px; }
Here are some alternatives that I've already tried:
width: 100% (with text-align: right) <--- not quite right, and I don't like the 100% width as opposed to 150px
adding code to position the div "manually" in the html (not CSS)
I've discovered that float and text-align don't affect to fixed positioning
Help is greatly appreciated! Thank you.
If I understand correctly, this is what you're after.
You need to add a container with an absolute position to get the content over to the right and then use a fixed position container to keep it top right where you need it.
Alternative if you don't want to add additional absolute container
#div {
width: 150px;
position: fixed;
right: calc(50% - 500px); /* will move the div as far as 50% of viewport
then move it back to 500px (that is half of max-width) */
}
/* if needed, you can add media query */
#media (max-width: 1000px) {
right: 0;
}
I got it working with no problem in a jsfiddle. You may want to look around at the CSS that is affecting the area. You may have an issue if #content is not a block level element (no width will be applied and such. More code from you would be greatly helpful so we know exactly what is going on and can help you out more.
I think you need this one:
#content {
margin: 0 auto;
max-width: 1000px;
height:20px;
background:yellow;
position: relative;
}
#div {
width: 150px;
position: absolute;
right: 0px;
}
position:fixed is not relative to any container. It is relative to the html element of the DOM. That is the reason you're seeing it at extreme right whatever you do to the #content.
I have a footer i created for a website, but for some reason when i change the width of the window the background image seems to just disappear throughout the right side as i'm shrinking the width of the window.
The footer is supposed to stretch 100% accross the bottom of the screen and does so until i start shrinking the width of the window to a certain point.
You can see an example of my issue Here
Any ideas how to fix this? I am totally stumped. Maybe i did something wrong with width?
The width of #footer is set to auto, and the content within (#content-wrapper) has a fixed width.
This is causing the horizontal bars to appear.
To solve this, you can set overflow:hidden to the parent div (#footer).
Try this:
#footer {
background-image: url("images/footer-bg.png");
background-repeat: repeat-x;
height: 451px;
margin: auto 0;
width: 100%;
overflow: hidden; //What you're looking for.
}
If you also want the inner div (#content-wrapper) to dynamically resize itself, use a percentage, instead of a pixel dimension for width:
#footer #content-wrapper {
height: 451px;
margin: auto;
width: 83%;
}
Hi i have check to your demo page you have define your footer width 1265px and now
than your define min width your html or body as like this
body, html {
min-width: 1265px;
}
because your max width is 1265 define to your footer so that you define same width your body or html
I am trying to create a bottom aligned, fluid width sticky footer that contains three links that are the same height as the container, which also have fluid widths.
I have created a top aligned version of this footer, where the links are not the full height of their container. It breaks if I set the bottom of the container to zero. I have put the code for this here:
http://jsfiddle.net/bHJR3/1/
How can I modify what I have so the bottom edge of the container is flush with the bottom of the window, and the links are the same height as the container?
I know how to do this through jquery but I am trying to avoid js if at all possible.
Thanks for any help.
EDIT:
Here's a jquery solution I came up with in case of no answers if anybody wants to see it. http://jsfiddle.net/bHJR3/2/
The reason it broke when you set bottom: 0 on #footer is because everything inside #footer had position: absolute. Absolutely positioned elements do not take up any space in the document flow and will not cause their parent elements to expand to contain them. Setting a height on #footer solves this. Setting height: 100% on the a tags will cause them to size relative to their parent element. You can keep div.content, but you would also have to set height: 100% on it.
Add the following CSS to #footer:
bottom: 0;
height: 90px;
Add the following CSS to A:
height: 100%;
line-height: 90px; /* matches the height from #footer to vertically center the link text */
Remove div.content. It doesn't seem necessary here.
Edit
You can center the footer by adding/changing the following CSS on #footer:
width: 640px;
left: 50%; /* positions left edge of #footer to center of page */
margin-left: -320px; /* pulls footer to the left (width / 2) * -1 */
Edit
You can use max-width and a media query to alter the styling of the footer if the window width is < 640px:
#footer {
position: fixed;
width: 100%;
max-width: 640px;
height: 114px;
bottom:0;
left: 50%;
margin-left: -320px;
}
#media only screen and (max-width: 640px) {
#footer {
margin-left: auto;
left: 0;
}
}