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%;
}
}
}
Related
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;
}
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;
}
I have a parent with a fixed width
.parent {
width: 800px;
height: 400px;
display: block;
}
I'm trying to center a child inside of it that has a dynamic width, based on the width of an image. I don't want the child div to have any background color (so just be as big as the image)
.child {
background: red;
//how to center?
}
.image-container {
max-height: 253px;
overflow: hidden;
padding: 0;
}
.image-container img {
max-width: 100%;
}
How can I center the div?
JSFiddle
Use text-align: center and remove the position: absolute from child class.
Fiddle
.parent {
width: 800px;
height: 400px;
display: block;
background: blue;
position: absolute;
text-align: center;
}
.child {
margin-left: auto;
margin-right: auto;
}
Set .child to:
.child {
display: block;
margin: 0 auto;
width: 200px;
}
http://jsfiddle.net/YjwCq/4/
I would like to create a div which fits the full height and width of the browser viewport. I just thought about simple css like:
#wrapper { width: 100%;
height: 100%;
background-color: red;
}
but it does not work for the height. The #wrapper does not have any height. Why?
Thanks in advance.
#wrapper {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
http://fiddle.jshell.net/zDuWh/
or
html, body { height: 100% }
#wrapper {
width: 100%;
height: 100%;
background-color: red;
}
http://fiddle.jshell.net/VJv6h/
How about this:-
#wrapper {
position: absolute;
width: 100%;
height: 100%;
background-color: red;
}
or
html { height: 100% }
body { height: 100% }
I looked through many posts and still can't get this one to work...
My goal is to style css only (no javascript) so that the height of DIV class "two" always fit into the DIV class "container".
The container DIV's height could change like window resize that is why I would like my "two" DIV to be able to change the size accordingly. So I set the container DIV height to 300px here but it could be any px like 500px etc
Please let me know if you need more clarification. Thanks in advance!
http://jsfiddle.net/pn9Qa/
HTML
<div class='container'>
<div class='top'>some text</div>
<div class='bottom'>
<div class='one'>header</div>
<div class='two'>items here</div>
</div>
</div>
CSS
.container
{
height: 300px;
width: 100%;
border: 3px solid red;
}
.top
{
height: 60px;
width: 100%;
background-color:pink;
float:left;
}
.bottom
{
width: 100%;
height: 100%;
background-color: green;
float: left;
}
.one
{
width: 100%;
height: 30px;
background-color: orange;
}
.two
{
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}
Here's one using calc():
width: -webkit-calc(100% - 60px); /* note, the space is necessary */
Here's one using display: flex
display: -webkit-flex;
-webkit-flex-direction: column;
Here's one using padding/margins and z-index:
box-sizing: border-box;
padding: 60px;
position: relative;
top: -60px;
Then, the old, do some math yourself version.
Brevity on prefixes used. Use http://caniuse.com/ if you need to see which ones are necessary.
Add "overflow: hidden;" to the .container rule, like this: http://jsfiddle.net/pn9Qa/2/
.container
{
height: 300px;
width: 100%;
border: 3px solid red;
overflow: hidden;
}
Do you need this: http://jsfiddle.net/pn9Qa/1/
html, body { height: 100%; }
.container
{
height: 100%;
width: 100%;
border: 3px solid red;
}
.top
{
height: 100%;
width: 100%;
background-color:pink;
float:left;
}
.bottom
{
width: 100%;
height: 100%;
background-color: green;
float: left;
}
.one
{
width: 100%;
height: 30px;
background-color: orange;
}
.two
{
width: 100%;
height: 100%;
background-color: yellow;
overflow: auto;
}