I would like to have a div with a width that fills 100% of the viewport and a height 10% of the same div's width. I've been trying height: 10vw; however it does not work well with all browsers (especially firefox and on Android). Is there anything I've been missing? What should be the best way to achieve it?
Thanks!
UPDATED: it's the same div. Wanted a single DIV with the width that fill 100% and a height 10% of it.
It doesn't work on all browser because they hasn't implemented yet. In Android it doesn't works yet and in Firefox it should work on version 19 and up: http://caniuse.com/viewport-units
You could put your element in an absolute position instead, and give it a height of 100%. It will cover the 100% of the height of the first element with a position different to static, and if there isn't any element with it, then it will cover root's height. And the root is the viewport.
div {
position: absolute;
height: 100%;
}
There's also a polyfill to support vw/vh/vm units.
Related
One of my divs' default position is about 800px down the page. I corrected that with:
position: relative;
top: -800px;
Now that I've moved everything up by 800px, there is a 800px gap at the bottom. I tried fiddling with the height, but 'auto' and '100%' does nothing, and '___px' messes up the layout.
How can I get rid of the gap?
try using max-height: 100vh in your styles. max-height sometimes works better then height (it depents on what your trying to do). vh just a different % method.
How do I set the height of a div container for example that should be 60% of the screen height?
Setting the 60% as the height in css works fine if the browser window is not resized. But if I shrink the browser window, the div shrinks accordingly.
https://zurb.com provides a nice example. The "Mission Accomplished", grey part is always the same height, no matter how the browser window is being resized. How can this be ensured?
I don't want to use px to ensure HiDpi support.
Thanks,
That's a simple fixed-height element; it has nothing to do with screen size.
You should just use px and not worry about anything; px means logical pixels and will work with arbitrary DPIs.
While the page in question simply used a fixed height (px) for the element in question, meaning that it will always have the same height (and won't be 60% of the height regardless of viewport height). In order to have an element be relative to the viewport, you're looking for viewport-sized typography.
To adjust based on height, you're looking for the CSS unit vh, which tells the element in question to scale based on the viewport height. You can also use vw to scale based on the viewport width.
Keep in mind that <body> has a default of margin: 8px, so if you want to avoid scrollbars when using viewport-sized typography, you'll also need to override this back to 0.
body {
margin: 0;
}
div {
height: 60vh;
width: 100vw;
background: red;
}
<div></div>
For more in-depth information on CSS units, I'd recommend checking out this guide.
Hope this helps! :)
Positioning responsively is the most confusing thing to me. Ill give a simple example to help portray what i can't figure out. I have a div. I make the width and height a percentage and position it on the page absolute, top 25% and left 5%. All of this looks fine but when i resize the page it moves to 25% and 5% of that smeller screen resolution, and i can't get it to just stay there. I have a min-width and height so that the actual div won't resize, just where it is positioned on the page. How do i position something on a web page so that it is responsive, yet will no move all over the place when i resize the browser window. Sorry if I'm not really good at explaining this, i just never really understood how to position correctly.
Example :
#example_div {
width: 10%;
height: 10%;
min-width: 100px;
min-height: 100px;
position: absolute;
top: 25%;
left: 5%;
}
percentage values are always relative to the parent element (i.e. the on around the current element, which can also be the body or window).
pixel values are absolute. You can combine pixel and percentage values. If you want your DIV to shrink when you resize the window, but stay at the same position, use percentage values for width and height, and pixel values for top or bottom and left or right.
The element's immediate parent is an element that has width that can be wider than the window width.
I would like my element containing paragraphs of text to not require horizontal scrolling, ie its width should be automatically adjusted to the window width.
I can do it with a couple of lines of jQuery code, but can it be done by CSS alone?
You can use the vw to get an approximate window width (its not always the window width, but 99% of the time this will work). Only CSS3, though. The units vhand vw act like percentage of the viewport size. More info here: https://developer.mozilla.org/en/docs/Web/CSS/length
Heres an example:
div { width: 100vw; } /* This div will be exactly the width of your viewport, or browser window (most of the time)*/
Use relative positioning whenever possible, any large child elements should be equal to the parent. But you can always absolutely position it:
.someElement{
position:absolute;
width:100%;
height:100%;
left:0px;
top: 0px;
}
Useful article: set an element to window width with CSS only
I am assuming I will need Javascript for this, but perhaps there is a CSS trick I'm not aware of.
I have a web page based on a square background image. Ideally, the user would always set the browser as a square, but I know that won't happen.
Because the image is square, if the image is set to fill the browser at 100%, the width is always the same as where the "bottom" of the page should be.
Thus, to position an element dynamically horizontally (so the page can be resized but still hold it's structure), the top position of said element is a percentage of the width.
In other words, if I have a horizontal bar that should ALWAYS be positioned 85% from the top of the image, the top position can be defined as 85% of width (top:85% [of browser width]). If you simply define the top of the horizontal bar as 85% (top:85%;), the horizontal bar's position will vary with the height of the browser window (whereas if you set it as 85% of the width it would be exactly where I want it).
As mentioned before, this is likely an easy thing to do with Javascript, but I don't know Javascript. I assume there isn't a function in CSS that will allow positioning by calculating a percentage of width, but that would be ideal.
Any help is greatly appreciated! Thanks in advance.
======================================
(source: renboy.com)
Unfortunately I'm a new user and the interface won't allow me to post a photo.
The page is square (a large, square image). There is a horizontal navbar who's top should be positioned 85% from the top of the image (it would be defined as (top:85%;) if the browser were opened to the exact same size and dimension (square) of the image).
However, if someone drags the bottom of their browser down (to make a tall rectangle), 85% will not be where I want it over the image. HOWEVER, 85% of the width will ALWAYS be in the exact right spot (because the image always fills 100% of the width). So, if I could define the horizontal position as 85% of the browser width (instead of height), the navbar would be exactly where I want it, no matter what dimensions the browser is open to. Thanks in advance for any possible solutions.
==================
Doing more research, it would seem that the answer might lie in Jquery (using position or maybe outerWidth or possibly something like var winWidth = $(window).width();), but I have no experience with Java/Javascript. Any help out there? Again, I want to set the position of the div holding the horizontal navigation bar to 85% of the width of the browser window. Thanks!
http://jsfiddle.net/f7RMA/
<div class="box">
<img src="http://renboy.com/images/squareWeb.jpg">
<div class="bar"></div>
</div>
CSS:
.box {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
}
.box img {
display: block;
width: 100%;
}
.box .bar {
position: absolute;
width: 100%;
height: 10%;
top: 85%;
}
WTF happens: .box is set to 100% width. The image inside is also set to 100%. Images in non-crappy browsers keep their aspect ratio when they are resized by only one side. .box wants contain the image entirely, so its height will be set to image's height. Because .box is positioned absolute, you can put the .bar inside the .box and position it vertically as you wish, because .box now has a well-defined height.