Whatever I try I can not adjust the iframe's height on my website. I have tried height="100%" and in CSS
iframe {
height: 100%;
}
link to it and my code (inspect)
https://jandjcards.netlify.app/
Have you tried using an absolute unit like vh, vw or px? If you use percentage the width and height of the iframe will depend on the parent element. However, using other relative units will allow you to change the width and height of the element properly.
Absolute measurement units:
VH (Relative to 1% of the height of the viewport)
VW (Relative to 1% of the width of the viewport)
PX (Pixels)
REM (Relative to font-size of the root element)
First solution
Try including this:
iframe{
width: 20vw;
/* Use whichever unit you want except percentage */
}
If you want more informaton about absolute and relative css units I recommend you this website:
https://www.w3schools.com/CSSref/css_units.asp
Second solution
If you still want to use percentage, you will need to resize the parent element of the iframe. Basically all the elements whose display is "block" will expand itself horizontally all it cans, but will set its height to whatever it has inside. So if you use percentage to resize an iframe it will adopt the height of the parent element and that's not the idea.
Try resizing the parent element like this:
#container{
height: 10vw;
}
iframe{
height: 80%;
}
I hope this helps!
Related
I have a fluid container and I want its height to gradually change based on the width of the window (since the with of the div is 100%).
Note that the desired behavior is similar to the one when the aspect-ratio css rule is applied, which is a linear gradual increase/decrease.
Such variation should stop at a certain min and max height.
I understand that some js might be required, so I am open to it if css alone fails.
You should look into different available units of width in css. Mainly the vh and vw. In the example below you can see a div, with a height of 10% of viewport width, and width of 10% of viewport height.
div {
width: 10vh;
height: 10vw;
background-color: red;
}
<div>Custom div</div>
I would like to change the width of some element according to the height of the page. if height gets smaller, the width of those elements gets larger!
You can use viewport-percentage lengths, specifically the vh (viewport height) unit to scale any property of an element based on the height of the window.
For example, this element will have its width at 75% of the browser's height:
.scale {
width: 75vh;
}
To do the inverse of this as you stated ("if height gets smaller, the width of those elements gets larger"), you could use calc like so:
.scale {
width: calc(100% - 25vh);
}
recently I found an responsive website which changes the image contents in different size of screen. When the screen size is big like desktop computer, the content of the div is like(there is no other text content, just a div filled with an image using background-image):
#div {
background-image: url('images/pc-content01.jpg');
background: no-repeat center center;
height: 1129px;
}
When the screen size gets smaller, the css style changes like:
#div {
background-image: url('images/pc-content01.jpg');
background-size: cover;
height: 0;
padding-bottom: 95.5%;
}
And the background image will be swap to another image when the screen size is as small as moblie devices.
And my question is, how the percentage of padding-bottom is calculated, why percentage in height is not working but percentage on padding-bottom works?
(I understand why percentage on height is not working).
In padding percentages refer to the width of the containing block. In this case is used to maintain the aspect ratio (the image one) when the width changes. It is a trick often used in responsive design. A box with an intrinsic ratio. Percentage in height works differently
The percentage is calculated with respect to the height of the
generated box's containing block...
MDN, so is not suitable for that purpose.
When using a percentage value for paddings, it always refers to the width of the element. See MDN. So in this case the padding-bottom of #div would be 95.5% of its width. When setting percentage value for height it calculates it by using the height of the containing block. See MDN
Height in percentage
Height using percentage only works if we give height using percentage to the body and html of the page, it will not work otherwise.
Like this-
html, body{
height:100%;
background:black;
}
body>div{
height:50%;
background:gray;
}
<body>
<div>HI</div>
</body>
Padding-bottom in percentage
But in the case of percentage on padding-bottom, it works irrespective to the body or HTML. It only checks the width of the containing element.
Like this -
html, body{
background:black;
}
div{
background:gray;
padding-bottom:20%;
}
<body>
<div>HI</div>
</body>
when I inspect my html element I find out that it is not taking 100 % of the browser view even if I am setting height to 100% in my css sheet.I test it with chrome and firefox and it is the same.The browser adds display:block to my html element could it be the reason?
it is not taking 100 % of the browser view
If you strictly want the element to take the height of the 'browser view', or viewport as it's called, simply do:
#element {
height: 100vh;
}
That sets the element to 100% the height of the viewport. Check this page for browser support info.
You didn't provide a code/example but my guess is that your html and body don't have the height: 100% as well. Try to add them to your css
html, body{
height: 100%;
}
Note that the height percentage refers to the element's parent, so if the element's parent is only 30% of the page for example, your element will be 30% too.
Make sure your HTML and Body are 100%;
body, html {
height: 100%
}
The most common reason I have found this happens is because you forgot to set height: 100% for both html and body elements.
Remember percentage is a relative unit and it can't work until it finds a parent that has declared absolute height/width. Also, if the parent has height/width set in percentage, that calculated value will be used as the basis for computing the percentage for children.
Also, while doing this, you might want to consider thinking about the box-sizing because if you set height as 100% and then apply margins and paddings to that element, it's gonna occupy more than 100% of it's parent's height.
Assuming your markup is like...
<html>
<body>
<div class="my-element"></div>
</body>
</html>
If you still wanna use percentage as length value, do.
html,
body,
.my-element {
height: 100%;
}
Or use the better length unit vh;
.my-element {
height: 100vh;
}
Read up more about vh here - https://developer.mozilla.org/en/docs/Web/CSS/length
Check browser compatibility here. - http://caniuse.com/#feat=viewport-units
I have website that uses percentages so it can support many screen resolutions.
Lets say your screenresolution is: 1920x1080 (1080p FULL HD)
I set width of element (let's say 15%), but for some reasons I can't set height (not the problem).
How do I make a div and set it's height based on calculated height in pixels.
In other words, the width becomes 1920*0.15=288px width. How to automatically make the height 288px?
Use padding wisely:
#someElement {
width: 15%;
height: 0; // this line is important! otwerwise height + padding > width
padding-bottom: 15%;
}
DEMO HERE
This is for 1:1, but you can choose any ratio you want.
You will need to use jQuery. An example:
$('#element').height($('#element').innerwidth());
Should set the element's height to its innerWidth (which excludes border and margin).
If you want to set dimensions for an anchor tag, you must give it display:block; or display:inline-block;
If you want a any element to achieve 100% height, you must set it to position:absolute;.