I need to style one of the containers in my app so that it has fixed aspect ratio and fills an outer container in width or height depending on viewport width. While filling width is as simple as setting
#myDiv{
width:100%;
padding-bottom: 50%
}
It doesn't seem like there is any obvious way to set the height to 100% and then left padding to 200% of that. Is this even possible without playing with bounding boxes in js?
As per my understanding you can try viewport height another css proeprty.
By giving like this:
#mydiv{
width:100%;
height:100vh;
}
vh means viewport height that will cover the container t0 viewport height.
Actually this is possible with media queries and "aspect-ratio". MDN says it's not supported by chrome, but it must be outdated, it works.
https://codepen.io/anon/pen/zWpmYK
#a4{
background: #f00;
width:100%;
padding-bottom: 141%;
}
#media (min-aspect-ratio: 21/29) {
#a4{
background: #0f0;
height: 98vh;
padding-bottom: 0;
width: 69vh;
}
}
https://developer.mozilla.org/fr/docs/Web/CSS/#media/aspect-ratio
Related
I am trying to set a <div> to a certain percentage height in CSS, but it just remains the same size as the content inside it. When I remove the HTML 5 <!DOCTYTPE html> however, it works, the <div> taking up the whole page as desired. I want the page to validate, so what should I do?
I have this CSS on the <div>, which has an ID of page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
I am trying to set a div to a certain percentage height in CSS
Percentage of what?
To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.
So the parent of the div must have an explicit height property. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.
If you want to make the div height a percentage of the viewport height, every ancestor of the div, including <html> and <body>, have to have height: 100%, so there is a chain of explicit percentage heights down to the div.
(*: or, if the div is positioned, the ‘containing block’, which is the nearest ancestor to also be positioned.)
Alternatively, all modern browsers and IE>=9 support new CSS units relative to viewport height (vh) and viewport width (vw):
div {
height:100vh;
}
See here for more info.
You need to set the height on the <html> and <body> elements as well; otherwise, they will only be large enough to fit the content. For example:
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
bobince's answer will let you know in which cases "height: XX%;" will or won't work.
If you want to create an element with a set ratio (height: % of it's own width), use the aspect-ratio property. Make sure height is not explicitly set on the element for it to work. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square {
width: 100%;
height: unset;
aspect-ratio: 1 / 1;
}
Historically, the best way to do this was to set the height using padding-bottom. Example for square:
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
The square container will just be made of padding, and the content will expand to fill the container. Long article from 2009 on this subject: http://alistapart.com/article/creating-intrinsic-ratios-for-video
In order to use percentage(%), you must define the % of its parent element. If you use body{height: 100%} it will not work because its parent have no percentage in height. In that case in order to work that body height you must add this in html{height:100%}
In other cases to get rid of that defining parent percentage you can use
body{height:100vh}
vh stands for viewport height
You can use 100vw / 100vh. CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>
Sometimes, you may want to conditionally set the height of a div, such as when the entire content is less than the height of the screen. Setting all parent elements to 100% will cut off content when it is longer than the screen size.
So, the way to get around this is to set the min-height:
Continue to let the parent elements automatically adjust their height
Then in your main div, subtract the pixel sizes of the header and footer div from 100vh (viewport units). In css, something like:
min-height: calc(100vh - 246px);
100vh is full length of the screen, minus the surrounding divs.
By setting min-height and not height, content longer than screen will continue to flow, instead of getting cut off.
With new CSS sizing properties you can get away with not setting exact height on parent. The new block-size and inline-size properties can be used like this:
<!DOCTYPE html>
<style>
#parent {
border: 1px dotted gray;
height: auto; /* auto values */
width: auto;
}
#wrapper {
background-color: violet;
writing-mode: vertical-lr;
block-size: 30%;
inline-size: 70%;
}
#child {
background-color: wheat;
writing-mode: horizontal-tb;
width: 30%; /* set to 100% if you don't want to expose wrapper */
height: 70%; /* none of the parent has exact height set */
}
</style>
<body>
<div id=parent>
<div id=wrapper>
<div id=child>Lorem ipsum dollar...</div>
Resize the browser window in full page mode. I think the values are relative to viewport height and width.
For more info refer: https://www.w3.org/TR/css-sizing-3/
Almost all browsers support it: https://caniuse.com/?search=inline-size
So I have a div on my page that no matter the device size will be 209.53px. I would like to have a calculation that can work out what percentage of the screen that this covers. That way I can set a map/image to fill the remaining portion of the screen.
I have tried to use height 80% ect but I just can't get it right, is there any way in SASS/SCSS to achieve this?
So I would go:
209.53/(SCREEN HEIGHT IN PIXELS) = PERCENTAGE COVERED
100 - PERCENTAGE COVERED = REMAINING VH
div{
height: REMAINING VH;
}
You can't know which percentage of the vh represents a fixed height in css and by extension in sass/scss but you can leave the fixed height in 209.53 (I would recommend to round that value since css will do it anyway) and use css calc. Then your image would have the following height:
height: calc(100vh - 209.53px);
Other solution would be using absolute position and a margin top. Or better, use flex:
.parent {
display: flex;
flex-direction: column;
width: 100%;
height: 100vh;
.fixed-height-element {
flex: 0 0 209.53px;
}
.image {
flex: 2;
}
}
You set the top and bottom of your div element to get the remaining screen height:
body {
padding:0;margin:0;
}
#fixed {
height: 209.53px;
background-color:green;
width:100%;
}
#remaining {
position:absolute;
top: 209.53px;
width:100%;
bottom:0;
background-color:red;
}
<div id="fixed">this has height 209.53px</div>
<div id="remaining">this has height until screen bottom</div>
SASS is a precompiler therefor it can't help with calculations regarding the screen height.
I am trying to set a <div> to a certain percentage height in CSS, but it just remains the same size as the content inside it. When I remove the HTML 5 <!DOCTYTPE html> however, it works, the <div> taking up the whole page as desired. I want the page to validate, so what should I do?
I have this CSS on the <div>, which has an ID of page:
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
I am trying to set a div to a certain percentage height in CSS
Percentage of what?
To set a percentage height, its parent element(*) must have an explicit height. This is fairly self-evident, in that if you leave height as auto, the block will take the height of its content... but if the content itself has a height expressed in terms of percentage of the parent you've made yourself a little Catch 22. The browser gives up and just uses the content height.
So the parent of the div must have an explicit height property. Whilst that height can also be a percentage if you want, that just moves the problem up to the next level.
If you want to make the div height a percentage of the viewport height, every ancestor of the div, including <html> and <body>, have to have height: 100%, so there is a chain of explicit percentage heights down to the div.
(*: or, if the div is positioned, the ‘containing block’, which is the nearest ancestor to also be positioned.)
Alternatively, all modern browsers and IE>=9 support new CSS units relative to viewport height (vh) and viewport width (vw):
div {
height:100vh;
}
See here for more info.
You need to set the height on the <html> and <body> elements as well; otherwise, they will only be large enough to fit the content. For example:
<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
bobince's answer will let you know in which cases "height: XX%;" will or won't work.
If you want to create an element with a set ratio (height: % of it's own width), use the aspect-ratio property. Make sure height is not explicitly set on the element for it to work. https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
.square {
width: 100%;
height: unset;
aspect-ratio: 1 / 1;
}
Historically, the best way to do this was to set the height using padding-bottom. Example for square:
<div class="square-container">
<div class="square-content">
<!-- put your content in here -->
</div>
</div>
.square-container { /* any display: block; element */
position: relative;
height: 0;
padding-bottom: 100%; /* of parent width */
}
.square-content {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
The square container will just be made of padding, and the content will expand to fill the container. Long article from 2009 on this subject: http://alistapart.com/article/creating-intrinsic-ratios-for-video
In order to use percentage(%), you must define the % of its parent element. If you use body{height: 100%} it will not work because its parent have no percentage in height. In that case in order to work that body height you must add this in html{height:100%}
In other cases to get rid of that defining parent percentage you can use
body{height:100vh}
vh stands for viewport height
You can use 100vw / 100vh. CSS3 gives us viewport-relative units. 100vw means 100% of the viewport width. 100vh; 100% of the height.
<div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
<div style="width:70%; height: 100%; border: 2px dashed red"></div>
<div style="width:30%; height: 100%; border: 2px dashed red"></div>
</div>
Sometimes, you may want to conditionally set the height of a div, such as when the entire content is less than the height of the screen. Setting all parent elements to 100% will cut off content when it is longer than the screen size.
So, the way to get around this is to set the min-height:
Continue to let the parent elements automatically adjust their height
Then in your main div, subtract the pixel sizes of the header and footer div from 100vh (viewport units). In css, something like:
min-height: calc(100vh - 246px);
100vh is full length of the screen, minus the surrounding divs.
By setting min-height and not height, content longer than screen will continue to flow, instead of getting cut off.
With new CSS sizing properties you can get away with not setting exact height on parent. The new block-size and inline-size properties can be used like this:
<!DOCTYPE html>
<style>
#parent {
border: 1px dotted gray;
height: auto; /* auto values */
width: auto;
}
#wrapper {
background-color: violet;
writing-mode: vertical-lr;
block-size: 30%;
inline-size: 70%;
}
#child {
background-color: wheat;
writing-mode: horizontal-tb;
width: 30%; /* set to 100% if you don't want to expose wrapper */
height: 70%; /* none of the parent has exact height set */
}
</style>
<body>
<div id=parent>
<div id=wrapper>
<div id=child>Lorem ipsum dollar...</div>
Resize the browser window in full page mode. I think the values are relative to viewport height and width.
For more info refer: https://www.w3.org/TR/css-sizing-3/
Almost all browsers support it: https://caniuse.com/?search=inline-size
So I'm trying to make "sections" with section that covers up the full height of the current page. Kind of like this. As you can see the width is set to 100. And heres my code
.cont{
background: #009dff;
height: 100%;
}
But for some reason it doesn't seem to work. Here's a demo. Any ideas?
This should do it.
http://jsbin.com/vijaxuyu/2/edit?html,css,output
html{
height:100%;
}
body{
height:100%;
}
section {
height: 100%;
}
The height % of html and body isn't by default 100%. Hence, you need to inform your browser explicitly. The reason why you have to specify height and sometimes min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
I have a wrapper div with a max-width of 1000px and max-height of 650px.
I want to dynamically adjust the width and height of this wrapper while maintaining its aspect ratio. If the browser window is re-sized to reduce the width, the height should be adjusted. If the height is reduced, the width should be adjusted accordingly.
I am using HTML5 and CSS3. This is an attempt to create a responsive layout which works on desktop and mobile devices.
It is pretty easy to adjust height to width.
Since padding percentages are relative to parent's width (even for the height yes) you can do something like this:
.smth {
height: 0;
padding: 100% 0 0 0;
}
Represent width and height using %
DEMO
Try this,
HTML:
<div><p>content</p></div>
CSS:
div {
border: 1px solid red;
width: 35%;
padding: 40%;
box-sizing: border-box;
position: relative;
}
p {
position: absolute;
top: 0;
left: 0;
}
Using Jquery,
jQuery Code:
var width = $('#widthHeight').width();
$('#widthHeight').css('height', width);
jqueryDEMO
As you're using CSS3 you can make use of the vmin or vmax units. 1 vmin is equivalent to 1/100 the size of whichever is smallest out of height or width, whereas 1 vmax is equal to 1/100 the size of the larger value. If a user's screen had a resolution of 1000x800px, 100vmin would be equal to 800px and 100vmax would be equal to 1000px, as the height here is the smaller unit and the width is the larger unit.
In your case you can make use of it like this:
div {
height: 65vmin;
width: 100vmin;
}
Or:
div {
height: 65vmax;
width: 100vmax;
}
JSFiddle demo.
Note that you'll have to adjust these values yourself. 100vmin here will set the width to full size of the screen's height or width (whichever is smallest), and this may not be the desired effect.
There are a couple of browser issues with this approach, unfortunately. As they are new units, support is not perfect. Some browsers will not resize the container until the page is reloaded.
How about this:
FIDDLE
div
{
width: 153.8vh; /* 100/65 * 100 */
height: 65vw; /* 100/1.538 = 65 */
background: pink;
max-height: 650px;
max-width: 1000px;
margin: auto;
position: absolute;
top:0;bottom:0; /* vertical center */
left:0;right:0; /* horizontal center */
}