0

I have 2 div divA and divB inside a main div,

divA is at top, and like a title stay top, he has a fixed height. divB is the content, and should occupy all the space left until the bottom.

divA had a size in pixel. divB should do 100% of height - divA size

    #container{
  width:400px;
  height:800px;
  background-color:red;
  position:relative;
  overflow: scroll;
}

#options{
  width:95%;
  height:30px;
  background: #734A6F;
  position: relative;
  color: #FFF;
  line-height: 33px;
  padding-left: 10px;
}

#buttons{
    position:absolute;
    width:95%;
    height:100%;
    background-color:blue;
}

<div id="container">
  <div id="options">

  </div>
   <div id="buttons">

  </div>
</div>

I do not want to hide the scroll so please no scroll:hidden in my case there is stuff inside the blue div, so it will be cut in half with scroll hidden. the only way to make it work correctly would be the blue div to fit

https://codepen.io/crocsx-the-styleful/pen/GYLKKj

Bobby
  • 4,372
  • 8
  • 47
  • 103
  • Do you mean divB should inherit full height from the main div (parent)? – Wei-jye Oct 29 '18 at 02:40
  • I edited a bit the pen. https://codepen.io/crocsx-the-styleful/pen/GYLKKj here i have button on the bottom (green). divB should be 100% of height (parent container) - divA size. so basically since container is 100% of the page, divB fulfill 100%of the page -divA size. all this that the button on bottom are not cut for exemple – Bobby Oct 29 '18 at 02:43
  • Check out the calc function: buttons.height: calc(100% - 30px); – dpolicastro Oct 29 '18 at 02:43

2 Answers2

1

I modify your codepen to achieve this. Basically:

  1. divB will have padding top equivalent to the height of divA.
  2. divA will has position set to absolute
  3. Overflow is set to auto for divB, so when the contents overflow in divB then only then the scrollbar will appear.

Codepen

Wei-jye
  • 412
  • 1
  • 6
  • 23
1

Unless you're looking for very old browser support, CSS flexbox makes that very easy.

display: flex; // use flexbox
flex-direction: column; // set flexbox to vertical
justify-content: flex-start; // start at the top

flex-basis: 30px; // how much height it takes up

flex: 2; // any number greater than 1 will cause it to fill the space


#container {
  width: 400px;
  height: 600px;
  background: red;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

#options {
  background: green;
  flex-basis: 30px;
}

#buttons {
  background: blue;
  flex: 2;
}
<div id="container">
  <div id="options">
    Div A
  </div>
  <div id="buttons">
    Div B
  </div>
</div>
Bryce Howitson
  • 7,339
  • 18
  • 40