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
Image takes all the space in flexbox div (100%) without deforming the div. So not the div adjusts to contain an image, but image adjusts to fullfill a div.
I know that in flexbox inner div that contain an image will adjust to size of teh image if you say:
img {height : 100%; width : 100%;}
I need an image in flex div to take all the space of the div. So 100% height and 100% width without affecting the div itself. So whatever is the size of a div I need an image in it to strech and occupy all the avalable space without changing the div itself. How do I do it?
note: if it is not possible with flexbox - then how can I achieve the result using different technic?
Here is the html:
<div class='box-wrap'>
<div class='box'>
<div>
<img src="http://placehold.it/400x400"/>
</div>
</div>
</div>
Here is the css :
.row {
margin-top : 10px;
display : flex;
flex-direction : row;
flex-wrap : wrap;
border : 1px solid silver;
}
.box,.box-wrap {
background : white;
flex : 1 1 8%;
border : 1px solid #aaa;
margin : 10px;
justify-content : space-between;
letter-spacing : 1px;
box-sizing : border-box;
}
.box-wrap {
padding : 0.5em 10px;
background : white;
}
Here is the corresponding codepen : http://codepen.io/anon/pen/WwYeJX
Try using object-fit property for the img :
.box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
}
First of all, to make the img fill the entire height of its container, you can set its container to flex (this then makes the image stop keeping its aspect ration fixed).
Then set the width and height of the container to whichever values you desire:
.box div {
display:flex;
height:600px;
width:100%;
}
And to fill out its full width do this:
.box div img {
width:100%;
}
In this particular case, it resizes the width according to the window and has a fixed height: https://jsfiddle.net/ (demo here)
COMMENT: Also unless there's a very specific reason you need all those nested divs, you could easily remove the innermost (3rd level) div and apply these values to the 2nd level div.
I want to set height of child element of flexbox item to 100%. But it doesn't work.
This is the jsFiddle link of these code.
Now, I compromised this solution with setting position : absolute and top : 0; right : 0; bottom : 0; left : 0; of the inner child element. Can you tell me why the method above cannot work? Is there any solution not doing with position.
It's because you're using height: 100% for .wrapper__second__thumb__inner, which is contained inside .wrapper__thumb that doesn't have height for itself (0px height), so .wrapper__second__thumb__inner will also have 0px height.
What you need is to add height: 100% to .wrapper__thumb, or remove it completely from the HTML, so .wrapper__second__thumb__inner will have it's height directly from the .wrapper__second
Here's the Updated Fiddle
Use vh unit for height and vw for width
.wrapper {
display : flex;
align-items : center;
flex-flow : row nowrap;
justify-content : space-between;
background-color : lightblue;
width : 100vw;
height: 100vh;
}
Updated fiddle: http://jsfiddle.net/qh8k6pft/3/
more info here : http://css-tricks.com/viewport-sized-typography/
HTML:
<body>
<div>
Div
</div>
</body>
CSS:
body{
width: 600px;
height: 600px;
background: red;
}
div{
width:200px;
background:blue;
margin-right:400px;
}
What really happens when giving margin-right to div? does it have effect at all? what about giving more margin-right, like 600px. then what happens?
OR That would be nice if you consider a div that exactly fits in its parent. like:
div{
width:400px;
background:blue;
padding: 98px;
border: 2px solid black;
}
Now what happens with giving margin-right to div?
There is nothing wrong with the margin-right itself. You cannot see the effect of margin-right because the 'width' property of div causes the margin of div to have more than 10px distance from the right wall of the body. Consequently, it causes the margin-right property not to have any visual effect.
In order to see the effect of margin-right, remove width property or increase it to a value which causes the div right border to come close to the body wall (or to attach it to the body wall). Then, set the margin-right to a larger value (to make the change more clear). Here is the modified code (the only change in the following code is that I have removed the width property in order to increase the width of div to occupy the whole width of the body):
fiddle link
css change :
body{
border: 5px dashed blue;
}
div {
height: 50px;
border: 2px solid red;
border-radius: 5px;
background-color: #308014;
margin-right:100px;
/*margin-left:50px;*/
/*margin-top:10px;*/
margin-bottom:10px;
}
The as it is this property will have no effect at both examples!
Try to play with this one fiddle !
`Margin-right` will have effect when you use along with `float:right`
property and will come 400px from right the whole div!
I try to render a page on mobile with responsive css.
I can't change the html, and i try to resolve my problem only with css.
Imagine that i have a div like that :
#example {
width : 25px;
height : 25px;
}
Inside this div, i have an 1024*768 image.
So the content is bigger than the contener (and i will show all the content)
My problem is that the following content will be placed at 25px of the top, not below the image.
EDIT : a new jsfiddle, more precise : http://jsfiddle.net/eABu5/12/
Do you have any idea ?
Many thanks
LIVE DEMO
CSS
#example {
width : 250px;
height : 250px;
background-color : #123456;
}
#pic {
margin-top: 250px;
float: left;
}
#under {
margin-top: 10px;
float: left;
}