CODEWITHSUNDEEP
htmlcss
injoy
injoy

Reputation: 4373

How to set the relative position of several nested div?

Assume I have a some divs like:

<div id="div0">
  <div id="div1"></div>
  <div id="div2"></div>
  <div id="div3"></div>
</div>

div0, div1 and div3 has fixed height. Now I'd like to have div2 auto-expand so that it can take up all the remaining space. Is there a way to achieve this? See this http://codepen.io/anon/pen/XJorMb as an example, I'd like the blue box sits in the middle and takes up all the remaining space.

Upvotes: 0

Views: 34

Answers (2)

Stickers
Stickers

Reputation: 78706

yes, use table and table-cell for rows.

http://jsfiddle.net/vrt2s232/1/

html, body {
    margin: 0;
    height: 100%;
}

#div0 {
    display: table;
    height: 100%;
}

#div0 > div {
    display: table-row;
}

#div1, #div3 {
    height: 100px;
    background: blue;
}

#div2 {
    background: red;
}
#div0 > div {
    display: table-cell;
}

#div1, #div3 {
    width: 100px;
    background: blue;
}

#div2 {
    background: red;
}

for columns:

http://jsfiddle.net/vrt2s232/

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106008

you can do this with flex:

#fixedPanel {
  position:fixed;
  width: 350px;
  height:150px;
  border-style: solid;
  border-width: 5px;
  display:flex;
  flex-direction:column;
}
#div1 {
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}
#div2 {
  flex:1;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}
#div3 {
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: green;
}
<div id="fixedPanel">
  <div id="div1"> 1 </div>
  <div id="div2"> 2 </div>
  <div id="div3"> 3 </div>
</div>

or display:table;

#fixedPanel {
  position:fixed;
  width: 350px;
  height:150px;
  border-style: solid;
  border-width: 5px;
  display:table;
  border-collapse:collapse;
}
#fixedPanel > div {
display:table-row;
}
#div1 {
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: red;
}
#div2 {
  height:100%;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}
#div3 {
  height: 20px;
  border-style: solid;
  border-width: 1px;
  border-color: green;
}
<div id="fixedPanel">
  <div id="div1"> 1 </div>
  <div id="div2"> 2 </div>
  <div id="div3"> 3 </div>
</div>

Upvotes: 1

Related Questions