My website is divided into three div's left, middle and right. I want to set the height of the left one to the height of the screen using viewport height property.
My code is
#left
{
height:1vph;
}
But this is not working. Please help me in doing this.
There is no vph height unit, I think you are looking for the vh unit. See the valid CSS length values on MDN.
Try using the value 100vh, a value of 1 will only be 1/100th of the screen.
#left
{
height:100vh;
}
You can set the viewport height (vh) of a selected div or tag ..
Let us we want to set the body element as a viewport height.Then You have to use
body{
height: 100 vh;
}
Hope, It works. Thanks
Related
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!
On my page, I want to make the body be at least 100% of the viewport (i.e. when the content is very less) but take on the height of the content as content increases.
Right now I have done
html{height:100%;}
body{height:100%;}
But with this, if the content increases, then body remains 100% of viewport height only and does not take the height of the content.
How to solve for this?
body { min-height: 100vh; } is all you'll need.
html {
height:100%;
}
body {
min-height:100%;
overflow-y:auto;
}
This should be work.
What you can do with css is to use “vw” unit. Just set body’s , width, height, min-width and min-height to 100vw/vh correspondingly; also you can give “box-sizing” : “border-box” which should include margin and paddings in the width and height
2.If you are not happy with the css results, you can always use javascript. You must write a function which will give viewport width and viewport height to body’s with and height,
With jquery you can do it like
$( window ).width();//documents width
$( document).width();//documents width
Same should work with height, call this function when document is ready
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>
Can anyone explain to me why my HTML page is not filling the height of the screen? I tried to set the min-height in the css but it's not really affecting anything.
JSFiddle: http://jsfiddle.net/9yFKn/
It's because you're not accounting for the height of the body.
Just add
body{
height: 100%;
}
http://jsfiddle.net/9yFKn/1/
Here is the solution :
html, body { height: 100%; }
but it just a solution you need to understand why is happened , this happened because your element is a block level element which wrap up your whole content width and height width as a 100% but this is not the case with height you need to specify the related to content to give a height in percentages like as above body has given 100%
here is the solution too
I am having problems getting my main content div to stretch to full height, the other container is able to stretch to full height.
http://westcountrycreamteas.co.uk/test.html
Is the page I am trying to stretch down and the div that is having problems is inner.
Remove
height: auto !important
from your container div #outer.
Should fix the issue.
You could try
#para {
margin-left: 10%;
height:999px;
overflow:hidden;
}
but i think,the content area shallstretch depending on the content.
Fiddle http://jsfiddle.net/CPfyL/
There is a bug in your outer div. You have set its height using a percentage, but heights can only be set using px. What should you do:
Set the outer div height to a desirable amount, eg: height: 900px;
Set the height of the div you're talking about the same as the outer's one.
i think you want max-height :
div{
height:100%;
}