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/
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
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.
http://jsfiddle.net/XW9Se/
I've set width: 200px; on the left <div> but if I view it with the browser inspector tool it appears that the real width is random or something. It keeps changing depending on the window size.
Why doesn't the width take effect?
EDIT: If I remove width: 100% the width stays fixed. But I need that so the #main div takes the remaining width :( Is there any way to have the sidebar # fixed width and the other <div> fill the rest of the container width? width: auto; on #main doesn't work..
The answer from Adrift is perfect; but a change to make it more flex would be
#left{
flex-basis: 200px;
flex-grow: 0;
flex-shrink: 0;
}
And remove the width property entirely.
It would be the flex way to say that the element will have an invariable width of 200px
My preferred way of dealing with this situation is to add:
flex-shrink: 0;
This way you may continue using width in your Flex container and you've given it specific information about how you wish this flex item to behave.
Another option, depending on the requirement is to use min-width, which is respected when using flex.
Give the #left div a min-width of 200px, should do the job.
Remove the width on .container > div and use flex: auto; on #main: fiddle
#main {
flex: auto;
background: lightblue;
-webkit-order: 2;
order: 2;
}
Also (if nothing from above works)
Check your min-width and max-width.
It fixed the same problem for me by increasing their range.
add display: contents on the element or div you want to maintain the width.
Solved this with a flex not respecting min-width when there was not enough content to fill that width.
Added the CSS rule box-sizing: initial; on the same flex element that had the non-working min-width declaration.
Add display:inline-block; in left class
I have really simple web page.
My css cod :
#bodyPart {
clear : both;
width : 1100px;
min-height : 500px;
margin-top : 10px;
margin-left : auto;
margin-right : auto;
border-style : solid;
border-width : 0px 1px;
border-color : white;
}
#left {
float : left;
width : 790px;
margin-left : 10px;
background-color : green;
}
#right {
float : left;
width : 280px;
margin-left : 10px;
background-color : darkgreen;
}
Html :
<div id ="bodyPart">
<div id ="left"></div>
<div id ="right"></div>
</div>
The min-height property does not include padding, borders, or margins!
But how i can make longer "bodyPart" when "left" is being longer :S :S
Is there any solution for this :S
make the height of #bodyPart to auto along with the min-height
#bodyPart {
clear : both;
width : 1100px;
min-height : 500px;
margin-top : 10px;
margin-left : auto;
margin-right : auto;
border-style : solid;
border-width : 0px 1px;
border-color : white;
height:auto;
}
and then add a div to clear
HTML
<div id ="bodyPart">
<div id ="left"></div>
<div id ="right"></div>
<div class="clear"></div>
</div>
CSS
.clear {clear:both;}
Firstly, min-height has nothing to do with the padding or margins or borders, secondly you can make each element longer (in height of course,) when its parent's size increases.
For that you must be using percentage heights. Lets say this:
div {
min-height: 90%;
}
This way, this div will fill the 90% of the parent (in this case body if there is no other container).
Also, I cannot understand what the divs relate to each other. So its hard to judge. But you can use percentage to fill the parent div's space. This way, when the browser will resize the element will resize and will fill the space.
I am guessing that in your case, left is a child and bodyPart is parent (meaning that left is inside the parent). For this you would require JS to get the height of the child and then set the height for the parent. If there is some sort of scrolls in your code, then remove them and the parent will definitely get more height when the child will get some!
div {
overflow-x: none; // for the parent
}
Tell me more :) So I can help you out.
How do you style a div in Bootstrap to span the entire width of the viewport (without fixed positioning) within the normal 12-grid system of "rows" and "spans"?
In the Bootstrap source, the navbar-fixed-top class achieves this effect using a fixed position and left and right attributes:
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
However, this navbar stays in the window regardless of scrolling. What styles are necessary to achieve the same entire width of the viewport without fixed positioning?
You can get that effect by stretching the body and html tags 100% in height and width and then defining a child div to that same width. We do that because width and height are relative, so if we define a div 100% in width/height it will only stretch so far as the body and html tag. Take a look at this example:
html, body {
width:100%;
height:100%;
}
body {
padding-top:60px;
}
.wrapper {
height: 100%;
width: 100%;
}
.huge {
width:100%;
height:100%;
background-color:#eee;
}
Demo, edit here.
Note: There is some extra height added to the body of the .huge div due to the padding-top added to the body to make way for the top navbar, if that padding is removed it will become a "true" 100% height and not 100% height + top 60px as it is now.
If you want to utilize Bootstrap 3 grid and build full-width layouts (stretching row to the entire viewport width) you should consider two things:
Bootstrap's .row class sets the margin property to: margin: 0 -15px;.
Grid content should be wrapped in a containing element to offset the aforesaid margin.
CSS
.container-full-width {
padding: 0 15px; /* Offset .row's margin */
width: 100%;
}
/* Optional. See comment below. */
.row {
padding-left: 70px;
padding-right: 70px;
}
HTML
<body>
<div class="container-full-width">
<div class="row">
...
</div>
</div>
...
</body>
Bear in mind that the .row elements will have no margin, but it can be fixed by overriding the padding property of the .row class and setting the expected margin.
Alternatively you could consider overriding .row class and offsetting a margin value, but this requires setting different values for different media/device types.
It is worth checking whether it works in Bootstrap 2 likewise.