Can't wrap my head around it! I try to make parent div to take no more than 80% height of the window with max-height, and child div to take all parent height minus something.
But height property in percents of the parent doesn't work for the child at all, unless I give parent height property.
Why is that?
Here is my simplified fiddle: https://jsfiddle.net/mbatcer/m2ohnsf5/
Why does inner div not respect parent height and go out of container?
HTML:
<div class="container">
<div class="inner">
<img src="http://via.placeholder.com/70x300">
</div>
</div>
CSS:
.container {
background: blue;
padding: 10px;
max-height: 100px;
}
.inner {
height: 100%;
width: 70px;
overflow: hidden;
}
I think this is what you are looking for:
.container {
background: blue;
padding: 10px;
max-height: 100px;
display: flex;
}
.inner {
width: 70px;
overflow: hidden;
}
Here is the fiddle: https://jsfiddle.net/f9sfczya/1/
Here I added display: flex; in your parent div and removed height: 100%;
from child div.
Unfortunately display: flex; is unsupported by IE9 and older.
Hope this may help you.
If you set child's max-height with a percentage, it will set the child's height according to the parent's real height instead of the max-height.
So you will need to set a height to your .container and set a max-height: 100% to your image since your image has lager height than width.
.container {
background: blue;
padding: 10px;
height: 100px;
}
.inner {
height: 100%;
overflow: hidden;
}
img {
max-height: 100%;
}
A better way to solve this problem is to use flex-box.
.container {
display: flex;
flex-flow: row;
background: blue;
padding: 10px;
max-height: 80vh;
}
.inner {
overflow: hidden;
}
img {
max-height: 100%;
}
Add height:80vh; to .container and it will work.
You should change your CSS like this-
.container {
background: blue;
padding: 10px;
}
.inner {
max-height: 100px;
width: 100% ;
overflow: hidden;
}
.inner img {
max-height: 100px;
}
Related
Im trying to make a vertical scroll on my .left class.
When i try to instert overflow-y: scroll, nothing happens.
I tried to set max-height on parent container, but its exceeds the div limits
I tried to set also overflow-y: scroll on .left divider.
Here is a reproduction.
Stackblitz:
https://stackblitz.com/edit/web-platform-49iyin?file=index.html
If you want to have a scroller inside that element, you need to have a fixed height for that parent element
.content {
height: 500px;
background: #ddd;
}
.wrapper {
max-width: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
.product-list {
display: flex;
margin-top: 24px;
}
.left {
height: 400px; /* Should have a fixed height here */
overflow: auto; /* Should be auto instead of `scroll` */
flex: 0.3;
background: #6200ff70;
}
.product {
display: flex;
height: 60px;
margin: 8px;
}
If you want to have a scroller for the entire area under content. You can set like this
.content {
height: 500px;
overflow: auto;
background: #ddd;
}
I have the following structure:
<div class="top">
<button class="wrap">
<span class="text">Hello</span>
</button>
</div>
I have the following CSS:
.top{
background-color:yellow;
width: 216px;
height: 70px;
}
.wrap, .text{
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
I have seen several posts regarding the "span taking the entire width of their parent" and the most popular answer was to make it display: block;
But in this case, it doesn't work. If you inspect, you will see that the span is taking 200px width instead of 216px width (width of button).
How can I fix this problem? Here is the fiddle
There is padding in your .wrap class. Set padding to 0 on your .wrap, .text declaration.
.top {
background-color:yellow;
width: 216px;
height: 70px;
}
.wrap, .text {
padding: 0px; //set padding to 0px
width: 100%;
height: 100%;
display: block;
overflow: hidden;
}
I have three elements:
.main
> .img-container
>> img
.main has a definite height,
.img-container has a max height equal to the container,
img should take up the containing div's height.
The problem is that the image is not constrained to the container's height,
as shown in this fiddle.
Please note that the image has to be limited to the container's height, not only making it vertically middle.
Thanks for your help.
Here is the current scss:
.main {
height: 200px;
background-color: #eee;
.img-container {
background-color: #ddd;
max-height: 100%;
width: 80%; /* just to show the main container */
img {
height: 100%;
}
}
}
Use height in .main .img-container class
DEMO
.main .img-container {
background-color: #ddd;
/*max-height: 100%;*/
height: 100%;
width: 80%;
}
Try this. Worked for me.
I have changed the max-height of image-container and height of img.
.main {
height: 200px;
background-color: #eee;
.img-container {
background-color: #ddd;
max-height: inherit;
width: 80%; /* just to show the main container */
img {
height: inherit;
}
}
}
may be you want this
.main {
height: 200px;
background-color: #eee;
text-align:center;
.img-container {
background-color: #ddd;
height: 100%;
width: 80%; /* just to show the main container */
img {
height: 100%;
}
}
}
i have replaced max-height with height and added text-align to center in main container. if you don't need image at center then remove text-align:center
Here is the solution.It's working for me
.main {
height: 200px;
background-color: #eee;
.img-container {
background-color: #ddd;
height: 100%;
width: 80%;
img {
height: 100%;
}
}
}
I'd like to understand why in my case, the height: x% does not apply. With percentage the div/section always get height:0.
My code: http://codepen.io/anon/pen/aHhmD
For an element to have a height in percentage applied, its ancestors must have a height applied. Your section.geral only has a min-height applied. Give it a height instead:
html, body{
padding:0;
margin:0;
height:100%
}
.geral{
position: relative;
display: block;
min-width: 100%;
height: 100%;
background-color: #008000;
}
.um{
position: relative;
display: block;
background-color: navy;
min-width: 100%;
min-height: 50%;
}
.dois{
position: relative;
display: block;
background-color: orange;
min-width: 100%;
min-height: 50%;
}
Using width and height instead of min-width and min-height also fixes the issue.
I'm trying to scroll items within a container without known height. I have div itemsHolder which fills up the rest of wrapper container. wrapper container can have any height but contains header container which has fixed height. So I don't know the height of itemsHolder and I need div items to be scrollable. Here's the code I tried but was unsuccessful.
To sum up. There's wrapper container containing header and itemsHolder. wrapper has variable height, header has fixed height and itemsHolder fills the rest of wrapper (wrapper.height - header.height = itemsHolder.height). I need div items to be scrollable within itemsHolder without using JS.
Thanks.
<div class="wrapper">
<div class="header">
title
</div>
<div class="itemsHolder">
<div class="items">
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
</div>
</div>
</div>
CSS:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 50px;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
overflow: scroll;
}
.item {
width: 100px;
height: 80px;
float: left;
}
http://jsfiddle.net/B2XUL/
Update: I don't know the size of wrapper, it may be different each time and therefore I don't know the height of itemsHolder so I can't set it fixed.
Do the following:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
}
.itemsHolder {
height: 100%;
overflow: auto;
overflow-x:hidden;
background: #ccc;
}
Demo
Set the height of itemsHolder and it will add the scroll if necessary
.itemsHolder {
overflow: scroll;
height: 150px;
}
http://jsfiddle.net/B2XUL/4/
EDIT: I'm very sorry I can't provide an explanation as to why, but adding bottom padding to .wrapper and setting the height of .itemsHolder seems to work. You may have to reduce size of wrapper by 35px when it is set.
Any explanation for this or even a better fix would be welcomed.
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
padding-bottom: 35px;
}
.itemsHolder {
overflow: scroll;
height: 100%;
}
(also .items seems redundant?)
see updated fiddle
Using calc() CSS property, you can achieve wrapper.height - header.height = itemsHolder.height
.itemsHolder {
overflow: auto;
height:calc(100% - 50px);
}
Add overflow auto:
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 20%;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
height: 80%;
overflow: auto;
overflow-x: hidden;
}
.item {
width: 100px;
height: 80px;
float: left;
}
Add overflow-x: hidden if you only want vertical scroll.
Updated Fiddle
js fiddle demo
.wrapper {
background: #ccc;
height: 200px;
width: 100px;
overflow: hidden;
}
.header {
height: 50px;
background: #00ffff;
}
.items {
background: #ff00ff;
}
.itemsHolder {
max-height: 150px;
overflow-y: scroll;
overflow-x: hidden;
}
.item {
width: 100px;
height: 80px;
float: left;
}