I was asked a question in an interview that "what is the difference between the css height:100% and height:auto?"
Can any one explain?
height: 100% gives the element 100% height of its parent container.
height: auto means the element height will depend upon the height of its children.
Consider these examples:
height: 100%
<div style="height: 50px">
<div id="innerDiv" style="height: 100%">
</div>
</div>
#innerDiv is going to have height: 50px
height: auto
<div style="height: 50px">
<div id="innerDiv" style="height: auto">
<div id="evenInner" style="height: 10px">
</div>
</div>
</div>
#innerDiv is going to have height: 10px
A height of 100% for is, presumably, the height of your browser's inner window, because that is the height of its parent, the page. An auto height will be the minimum height of necessary to contain .
height:100% works if the parent container has a specified height property else, it won't work
The default is height: auto in browser, but height: X% Defines the height in percentage of the containing block.
Related
I have an element container, which must remain static. Inside it lies fix, which I need to be fixed when container overflows and I scroll in it.
Example:
<div id="container" style="width: 850px; height: 200px; position: static;">
<div id="fix"></div>
<div id="otherStuff" style="width: 2000px;"></div>
</div>
Can I do this with CSS?
You can put the content you want to overflow in an element with overflow-x: scroll, and the #fix element will stay where it is.
.overflow {
overflow-x: scroll;
}
<div id="container" style="width: 850px; height: 200px; position: static;">
<div id="fix">fix</div>
<div class="overflow">
<div id="otherStuff" style="width: 2000px;">otherstuff</div>
</div>
</div>
Here is plunker example, the left (yellow) cell is the relevant one. It isn't bootstrap-specific but I've used its classes to make the image responsive.
<div class="container">
<div class="row">
<div class="col-xs-6" style="padding:30px; background:yellow">
<div class="wrapper">
<img class="center-block img-responsive" style="position: absolute" src="..."">
<img class="center-block img-responsive" style="visibility: hidden" src="...">
</div>
</div>
<div class="col-xs-6" style="padding:30px; background:lime">
<img class="center-block img-responsive" src="...">
</div>
</div>
</div>
And relevant css, borrowed from bootstrap
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
.img-responsive {
display: block;
max-width: 100%;
width:90%;
height: auto;
}
.img-responsive:hover {
min-width:110%;
}
.wrapper {
position: relative;
height: 100%;
}
The thing I'm trying to accomplish:
Fit the image into the container (bootstrap column with some padding here) proportionally (ok)
Make it a bit smaller while keeping it at center, container's size is unchanged (ok)
Make it bigger on hover while still keeping it at center, container's size is unchanged (fixed with transform: scale)
The second layered image (absolute-positioned) should fit the size and the position of the first (not ok)
I've made placeholder<img> hidden to keep the container's size, but <img> with position: absolute aligns to the left anyway.
How this can be solved? I will use JS on page but clearly I'm not eager to use it to pin that image to the placeholder programmatically.
Make it bigger on hover while still keeping it at center, container's size is unchanged
Use CSS3's transform attribute :
.img-responsive:hover {
transform: scale(1.1);
}
https://developer.mozilla.org/fr/docs/Web/CSS/transform
Make sure to prefix the transform property:
http://caniuse.com/#search=transform
Plunker version: http://plnkr.co/edit/HYJ9XJ8rAc3cgVI0uKFe?p=preview
The second layered image (absolute-positioned) should fit the size and the position of the first
Add left: 0 and right: 0 to your absolute positioned element.
I have a responsive image list. Each image is inside a container.
I want the image container to be 75% of its first container (unit container in this case)
the image ration is 1:1
I played a little with the image container percentage width but it feels like this is not the solution.
<ul class="list-inline unit_list ">
<li class="unit_list_item col-xs-24 col-sm-12 col-md-8">
<a href='#' alt="unit">
<div class="unit_container">
<div class="icon_container unit_icon">
<img class="img-responsive unit_image" src="http://placehold.it/60X60" />
</div>
<div class="unit_name">FREE</div>
</div>
</a>
</li></ul>
Btw, I'm using bootstrap if that's matter.
http://jsfiddle.net/wmu3w3ej/1/
Thanks to #Mary Melody
transform: scale(0.75);
works like magic
I'm a little afraid to use it since it's so simple.
any thoughts?
Using the logic from here: https://stackoverflow.com/a/20117454/3389737
I have applied it to your situation: http://jsfiddle.net/phwaLmen/1/
#wrapper
{
position: relative;
width: 50%;
overflow: hidden;
}
#wrapper:before
{
content: "";
display: block;
padding-top: 75%;
}
#image
{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
}
<div id="wrapper">
<img src="http://placehold.it/350x350" id="image">
</div>
Add relative positioning to the parent, set its width as you'd like and make sure the overflow is hidden.
Create a :before element for the wrapper with a padding-top of 75%. Since there is no height specified for the #wrapper, this 75% is based on the width of the element :)
Then you have your image, positioned absolutely and then fitted to the container. If you want the image to be cropped instead of resized, remove the height: 100% and width: 100% style rules from it.
You can do it like this (in your html):
<img src="img.jpg" height="75%" />
Good luck!
i want to set child div width to be 80% of parent div. how to do
<div id='container'>
<div id="toolbar" class="ui-widget-header ui-corner-all" style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;">
<button id="BtnPreviousMonth">Previous Month</button>
<button id="BtnNextMonth">Next Month</button>
</div>
<div id='subcontainer'>
<div id="mycal" style="position:absolute;"></div>
</div>
</div>
when i set mycal width and height in %. it has no effect. any suggestions ?
Set width:80% , you can set width in percentage(%) , The percentage is calculated with respect to the width of the generated box's containing block.
HTML:
<div id="container">
<div id="child">
</div>
</div>
CSS:
#container{
position:relative;
width:500px;
height:100px;
}
#child{
width:80%;
}
Fiddle Demo
You must have to provide with to parent div then after you can give width in % to child div.
In your snippet mycal is absolutely positioned. That means that its width and height in % will be relative to the nearest non-static positioned parent (position: relative, absolute, fixed) or to the body in case there is no such. If you want to give mycal 80% width of subcontainer you can make
#subcontainer {
position:relative;
}
but, since subcontainer does not have a defined height and it's child is absolutely positioned (and therefore doesn't affect parent's height) - subcontainer's height is 0. Therefore 20% of 0 is 0. To solve this issue, you can either specify height of subcontainer or populate it with static positioned content.
Here is an example: http://jsbin.com/iYOQAKiS/1/edit
<div id='container'>
<div id="toolbar" class="ui-widget-header ui-corner-all" style="padding:3px; vertical-align: middle; white-space:nowrap; overflow: hidden;">
<button id="BtnPreviousMonth">Previous Month</button>
<button id="BtnNextMonth">Next Month</button>
</div>
<div id="subcontainer" style="position:relative;">Some static content
<div id="mycal" style="position:absolute;width:80%;height:20%">
MyCal content
</div>
</div>
</div>
Since you want to set width 80% to the child mycal, set width to its parent subcontainer
#subcontainer{
width:1000px;
heigth:1000px
}
#mycal{
width:80%;
height:20%;
}
When you set a percentage width and height, it has an effect.
I guess, the problem in your case is, that it is just not visible, set some background-color to see it
#mycal {
width: 80%;
height: 50%;
background-color: plum;
}
See JSFiddle
Although, this might not be what you want. Since you've set position: absolute, the containing box is not subcontainer, but the body element.
I have following HTML+CSS markup:
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><img src="slide-01.jpg"></div>
<div style="position: absolute;"><img src="slide-02.jpg"></div>
<div style="position: absolute;"><img src="slide-03.jpg"></div>
</div>
Notice that the slides are absolute-positioned inside a relative-positioned element so that the top-left corners of all slides are aligned together. All slides are equal height, but the height is not pre-determined hence this problem: the "protofade" div does not have a height. Is there any CSS trick that can make this div as tall as the first slide without explicitly specifying height: NNpx.
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
<div style="visibility:hidden;"><div style="width: 200px; height: 50px; background: red;"> This should be a second copy of slide one </div></div>
</div>
The above code shows your original code (except with divs, as per Scott Brown, above), with the addition of a second copy of "slide 1", positioned with the default algorithm, but with its box hidden. Accordingly, it's container, protofade, has to be large enough to accomomdate the box, even though the box is not displayed.
There is a jQuery answer to this. I don't believe this can be done through CSS as you need to be able to get the height of the first div.
I've illustrated it here: http://jsfiddle.net/thewebdes/FHgz5/
For reference, here's a run down of the code:
HTML
<!--
using DIVs in place of IMGs
setting height to these DIVs, all equal as specified
-->
<div id="protofade" style="position: relative;">
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #F66;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #6F6;"></div></div>
<div style="position: absolute;"><div style="width: 200px; height: 50px; background: #66F;"></div></div>
</div>
CSS
/* border set to show height given to DIV */
#protofade { border: 5px solid #000; }
JS
// CSS height set based on the height of the first DIV
// First DIV chosen as all heights will be the same anyway so it shouldn't matter.
$('#protofade').css("height", $('#protofade div:eq(1)').height());