.visitcard-ipcashier {
position: fixed;
background: white;
top: 0;
right: 0;
height: 95%;
overflow: auto;
z-index: 50;
}
In the above code, i use height atrribute in 93%. But this varies depends on screen. How can i get screen height in css?
You can't "get" the viewport height as such, in the way that you can with JS to store it in a variable, but you can use it in calc() to change the height of elements. For example, height: calc( 100vh - 50px ); which would equate to "the window height less 50px".
In this case I suggest you to use vh (hundreds of viewport height):
If you set height: 100vh; it would take 100% height of each screen.
Code Example
It is not possible using CSS, however you can control the page design using media queries.
Or, you can get the screen height by using screen.height and width by using screen.width. [They are JS properties]
Here is a basic JS code of doing this:
console.log("Width: "+screen.width+": Height: "+screen.height);
You need to use javascript to get screen's information.
Related
Seems so simple, but ...
scale image size with window size?
1)create a container for the image = entire window width, so container grows with window width
2)slap image inside the container
3)scale image based on % of the width of the container
HTML
<div class="imgEnclosure">
<img class="validatedImage"
src="1776_Support/images/check_mark.png" alt="thisImage"
onclick="SwapImages(this); return false" />
</div>
CSS
.imgEnclosure {
width: 100%;
}
.validatedImage {
/* original size (w,h) = 220px by 108px */
/*
1.0em = font-size: 24px from html Selector
so ... original size = 9.167em by 4.500em
*/
max-width: 30%;
min-width: 10%;
height: auto;
}
The image shows the same size no matter how I change the browser window width.
Good Grief ...
Instead of:
max-width: 30%;
min-width: 10%;
Use
width: 30%;
Honestly, I could not ask for a simpler answer ... even though I do not understand why the max-, min-width response does not work?
I am not sure as to why it didn't work , I believe it could be an error in styling in the parent element or forced styling from parent elements that transferred to the child element .
Did you try placing the
max-width: 30%; min-width: 10%;
in your .imgEnclosure and not the img class itself? Maybe that would have worked too. I normally place positional styles in parent elements so that child elements would easily inherit the styling properties.
Regardless: do check out this as it might answer your question! hope this helped :)
this is all over the stackoverflow,but it doesn't work for me.
using twitter bootstrap 3, i need to set the jumbotron class div to full display height.
this is my test site:
http://test.ulkas.eu/
i read i shall include
html {
height: 100%;
}
body {
min-height: 100%;
padding-top: 50px;
}
but it still doesn't work. maybe i got some syntax error somewhere?
In order to apply 100% height property to inner divisions you need to mention the same property to all the parent divs. So add
body{height: 100%;min-height:100%;padding-top:50px;}
.jumbotron{height:100%;}
to your body as well as to jumbortron class
The height of your html / body will always only be the height of your content - those tags behave slightly different to standard div / block tags. To get something to be truly 100% high your best bet is to remove it from the standard flow of the page using position: absolute / fixed, then set your div to be 100% high. Something like this:
.fullheight {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: 2;
}
I think it's always worth setting a z-index on anything I position outside the normal page flow, allows you to control which parts appear on top of others.
I'd like to deploy a background image in the body of my website that scales down with the window resolution, but does not scale up beyond it's original size (1920x1080). That way, users with smaller resolutions can still see the entire image, but those beyond do not have an ugly upscaled background.
It doesn't look like background images support properties like max-width, which I would usually use for a purpose like that.
What could the solution be? Is this possible in CSS without extra scripting?
I would use a div as a wrapper with a max-width and set the background to that div.
HTML
<body>
<div class="container">Content</div>
</body>
CSS
.container {
width: 100%;
max-width: 1920px; /* YOUR BG MAX SIZE */
background:url("bg.png") no-repeat;
background-size: 100%;
}
Just a really small/quick suggestion:
Depending on how it looks, and all flows together, background-size:contain; might be an option.
or, on your body, set the max width to 1920, set the margins to auto, and that might also work for you.
You can try like this. Any size image resolution will work like responsive:
img#mybg {
position: fixed; //image will always be top: 0 left: 0 by default.
display: block; //make it a block for width to work.
width: 100%; //set default width
height: 100%; //set default height
max-width: 1920px; //set max width
max-height: 1080px; //set max height
z-index: -999999; //set z-index so it won't overlap any other element.
background-size:100% 100%;
}
You could try creating an html <img> tag with a specific id
e.g.
HTML
<img id="mybg" src="path/to/file" alt="never forget the blind folks!" />
CSS
img#mybg {
position: fixed; //image will always be top: 0 left: 0 by default.
display: block; //make it a block for width to work.
width: 100%; //set default width
height: 100%; //set default height
max-width: 1920px; //set max width
max-height: 1080px; //set max height
z-index: -999999; //set z-index so it won't overlap any other element.
}
For dynamic centering you would have to use Javascript in combination with a window.onresize event.
If you need more information I will edit my post accordingly.
A good alternative which is very easy to use(but does stretch your background) would be to use jquery backstretch plugin. It allows you to simply add a fullscreen background image, which will scale with resolution (which is not exactly what you want, but the best alternative I could think of).
This question already has answers here:
Maintain the aspect ratio of a div with CSS
(37 answers)
Closed 6 years ago.
Im making a responsive design, which has to keep the proportions of its elements (height to width) no matter what the screen size is, so i don't know the size in pixels for any of the elements and i can work only in %.
I can set either the width or the height as a % of the browser size, but the i have no idea how to set the other property value.
That using only CSS, making JS calculate the values is not an option.
I came across this problem last year and found an obscure solution after some tedious researching. Unfortunately it involves wrapper DIVs. The structure is simple - you have a parent DIV which contains the contents container and another DIV that sets the proportions. You set the margin-top of the 'proportion' DIV as percent of the width of the parent... Example:
#parent {
position: relative;
}
.proportions {
margin-top: 75%; /* makes parent height to 75% of it's width (4:3) */
}
.container { /* contents container with 100% width and height of #parent */
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
}
http://jsfiddle.net/twpTU/
Use CSS calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc
It has pretty good adoption for modern browsers http://caniuse.com/calc as a fall back use CSS media queries and have min widths and heights to fall back on.
Obviously you could always just calculate both percentages in advance.
Div1 needs a height of 60% and the width needs to be 1/4th the height. 60% * .25 = width: 15%
div {
position: absolute;
border: 2px solid black
}
#div1 {
width: 40%;
height: calc(40% * 1.2);
}
#div2 {
width: calc(90% / 4);
height: 90%;
}
http://jsfiddle.net/pU4QA/
First, I know that the OP has clearly mentioned that he is not looking for any Javascript approach, however I think it might be useful for couple of people who are still open to use Javascript as well.
Here is the answer; To set the size for both width and height in the same percentage, you can set the width of the parent element to width: 100%; via CSS, then with Javascript you set the height of the parent to the size of width. Then you would have a square-shaped element as the parent.
Now you can apply both width: 10%; height: 10%; to the child elements. Then only things you need to do in order to keep it responsive is to listen for the window resize event and then you apply the height again only to the parent, and all children will be updated.
http://jsfiddle.net/sDzHb/
Something like this will keep it responsive to the browser size:
$(window)
.resize(function() {
var w = $(document).width();
$('.parent').height(w);
})
.trigger( 'resize' );
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.