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! :)
Related
I have a div that needs to be full screen width inside a parent div that has a limited with. Simplified, it's something like:
HTML:
<div class="container">
<div class="banner">
</div>
</div>
CSS:
.container {
width: 1170px;
margin: auto;
}
.banner {
width: 100vw;
margin-left: calc( 50% - 50vw);
}
which works fine, except for one thing: The scrollbar on the page covers some of the content in the child div, because 100vw appearantly includes the scrollbar width. So is there a way around this so I can set the width to (100vw - scrollbar width), or perhaps a completely different way to achieve what I want to do with pure CSS?
Try to use % where you can. vw is a percent of the viewport width including the scrollbar and % is a percent of the wrapper object, where the body is not rendered inside the scrollbar.
Don't use a fixed width (px) container. It's bad practice and will not render well on mobile screens. See Responsive Web Design for more.
Don't use vw for containers (or banners). It has weird effects on the scrollbar.
Finally, I don't understand why you want something to be at 300vw or 3x the width of the viewport, but sure. If you designed your page right with responsive web design and avoided setting any wrapper's dimensions with px, then it shouldn't be hard to know what that width of the containing div is. For example, if the wrapper (containing div) is at 30% of the viewport and you want your banner to be 300% of the viewport, then you want 1000% for your banner to span the width of three screens.
You could set the scrollbar width and subtract it from the container's width using 'pure CSS'.
You could give width to the scroll bar in webkit-browsers using:
body::-webkit-scrollbar {
width: scrollbarwidthpx;
}
and set the content width as:
width: calc(100vw - scrollbarwidthpx);
You could make use of this article regarding customizing scrollbar
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 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.
is it possible to have a div (or other element) resize its height in relation to its width (or the other way around) using CSS? basically, to get it to behave the way an image with a percentage width resizes proportionally as the browser window is resized?
If you want to set a width or height relative to a .parent element and you know the aspect ratio that needs to be maintained, you can do something like this:
.parent{
width: 150px;
}
.child{
width: 100%;
padding-top: 50%; /* outer height will be 75px (150px*0.5) */
}
Note that you are relying on having a height (or width) of 0 and defining it based on the padding only. So, if you want to add any content you will probably need to wrap it within an absolutely positioned div within .child. See this fiddle for an example
Look at this related question. In short: No, it's not possible using only CSS
I have a video element set to 100% width in a container div. That div has a max-width of 800px and min-width of 400px. When resizing the browser I need the video element to resize while retaining its original aspect ratio. Currently it resizes in width but remains its original height, adding letterbox bars above and below to make up for it.
Is it possible to resize the video element dynamically like this without resorting to Javascript?
According to the box model, in the section on replaced elements, this should work as you expect: Since the video has a height of auto and a set width, and it has an intrinstic ratio (as videos do), then the used value of height should be computed based on those. Make sure you are not specifying the height anywhere — the following CSS worked for me:
video {
width: 100%;
}
div {
max-width: 800px;
min-width: 400px;
}
Try explicitly adding height: auto to the video — maybe with !important to see if it’s getting set somewhere else.