autofit div variant [ 823 views ]
Goal: to find a good way to create an autofit div
How can I use a divs to fill spaces like panels in the desktop applications?
1. css calc()
This is brilliant but maybe dangerous because of the browsers.
.container {
height: 100%;
}
.div1 {
height: 24px;
}
.div2{
height: calc(100% - 24px); /* Subtract the div1 size */
overflow: auto;
}
2. content shifting with padding
.container {
height: 100%;
}
.div1 {
height: 24px;
}
.div2{
padding-top: 24px;
/* padding and border included in the width and height */
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 100%;
min-height: 50px; /* don't forget the padding! */
overflow: auto;
}
3. stretched sail – div glued to the edges
This way is similar to the desktop solution.
.container {
height: 100%;
}
.div1 {
height: 24px;
}
.div2{
/* like a stretched sail */
position: absolute;
top: 24px;
bottom: 0;
left: 0;
width: 100%;
}
Thursday, March 19th, 2015 at 12:41.
Filed under web trick
.
