Silverterra 3d blog

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.