Auto height div with overflow and scroll when needed

Question

I m trying to make a website with no vertical scrolling for a page  but i need that one of the DIVs i have to expand vertically to the bottom of the page  at most   and that when it has content that does not fit  the div should create a vertical scroller   i already have the css for the inside of the div figured out in this fiddle  creating the scroller when needed  i also have figured out how to make the container div grow to occupy exactly the vertical space it has in the page  i just can t make them work out together   please have in mind that in jsfiddle you won t be able to view the content of the whole website and in that sense what you get for the 2nd fiddle doesn t really show what s being done  but it works as i intended though   just another note  as they are different fiddles  the id container div in the 1st fiddle is he id dcontent div of the 2nd example   there is one other thing  for a type of content  this div will scroll vertically  but for other type of content  i want it to scroll horizontally  as it will have a product  slider  displaying elements horizontally inside this DIV   please also look at this photo because it might be easier to understand what i m trying to say  PICTURE  i tried looking to other questions regarding these topics  but none seemed to cover all of the aspects i m trying to solve     S  if there is something else i can provide to help you me    figuring it out  pls let me know   thanks   EDIT1  fixed typos  EDIT2  added picture for explanation

User · Answer

You can do this just with flexboxes and overflow property   Even if parent height is computed too   Please see this answer or JSFiddle for details

User · Answer

x000D   x000D    document  ready function       Fix dropdown-menu box size upto 2 items but above 2 items scroll the menu box         dropdown   click function             var maxHeight   301          if      dropdown-menu   height    gt  maxHeight                 maxHeight   302                  dropdown-menu   height maxHeight                   dropdown-menu   css   overflow-y   scroll               else                   dropdown-menu   height                    dropdown-menu   css   overflow-y   hidden                           x000D   x000D   x000D

User · Answer

I m surprised no one s mentioned calc   yet    I wasn t able to make-out your specific case from your fiddles  but I understand your problem  you want a height  100  container that can still use overflow-y  auto    This doesn t work out of the box because overflow requires some hard-coded size constraint to know when it ought to start handling overflow  So  if you went with height  100px  it d work as expected   The good news is that calc   can help  but it s not as simple as height  100      calc   lets you combine arbitrary units of measure    So  for the situation you describe in the picture you include    Since all the elements above and below the pink div are of a known height  let s say  200px in total height   you can use calc to determine the height of ole pinky   height  calc 100vh - 200px    or   height is 100  of the view height minus 200px     Then  overflow-y  auto should work like a charm

User · Answer

This is a horizontal solution with the use of FlexBox and without the pesky absolute positioning    x000D   x000D  body   x000D    height  100vh  x000D    margin  0  x000D    display  flex  x000D    flex-direction  row  x000D    x000D   x000D   left  x000D   right   x000D    flex-grow  1  x000D    x000D   x000D   left   x000D    background-color  lightgrey  x000D    flex-basis  33   x000D    flex-shrink  0  x000D    x000D   x000D   right   x000D    background-color  aliceblue  x000D    display  flex  x000D    flex-direction  row  x000D    flex-basis  66   x000D    overflow  scroll       other browsers    x000D    overflow  overlay      Chrome    x000D    x000D   x000D   item   x000D    width  150px  x000D    background-color  darkseagreen  x000D    flex-shrink  0  x000D    margin-left  10px  x000D    x000D   lt html gt  x000D   x000D   lt body gt  x000D     lt section id  left  gt  lt  section gt  x000D     lt section id  right  gt  x000D       lt div class  item  gt  lt  div gt  x000D       lt div class  item  gt  lt  div gt  x000D       lt div class  item  gt  lt  div gt  x000D     lt  section gt  x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Well  after long research  i found a workaround that does what i need  http   jsfiddle net CqB3d 25   CSS   body      margin  0      padding  0      border  0      overflow  hidden      height  100        max-height  100        caixa      width  800px      margin-left  auto      margin-right  auto     framecontentTop   framecontentBottom      position  absolute       top  0         width  800px       height  100px    Height of top frame div       overflow  hidden    Disable scrollbars  Set to  scroll  to enable       background-color  navy      color  white       framecontentBottom      top  auto      bottom  0       height  110px    Height of bottom frame div       overflow  hidden    Disable scrollbars  Set to  scroll  to enable       background-color  navy      color  white      maincontent      position  fixed       top  100px    Set top value to HeightOfTopFrameDiv       margin-left auto      margin-right  auto      bottom  110px    Set bottom value to HeightOfBottomFrameDiv       overflow  auto       background   fff      width  800px      innertube      margin  15px    Margins for inner DIV inside each DIV  to provide padding         html body    IE6 hack       padding  130px 0 110px 0    Set value to  HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0         html  maincontent    IE6 hack       height  100        width  800px       HTML    lt div id  framecontentBottom  gt       lt div class  innertube  gt           lt h3 gt Sample text here lt  h3 gt       lt  div gt   lt  div gt   lt div id  maincontent  gt       lt div class  innertube  gt      Lorem ipsum dolor sit amet  consectetur adipiscing elit  Sed scelerisque  ligula hendrerit euismod auctor  diam nunc sollicitudin nibh  id luctus eros nibh porta tellus  Phasellus sed suscipit dolor  Quisque at mi dolor  eu fermentum turpis  Nunc posuere venenatis est  in sagittis nulla consectetur eget      much longer text         lt  div gt   lt  div gt    might not work with the horizontal thingy yet  but  it s a work in progress   I basically dropped the  inception  boxes-inside-boxes-inside-boxes model and used fixed positioning with dynamic height and overflow properties   Hope this might help whoever finds the question later   EDIT  This is the final answer

User · Answer

This is what I managed to do so far  I guess this is kind of what you re trying to pull out  The only thing is that I can still not manage to assign the proper height to the container DIV   JSFIDDLE  The HTML    lt div id  container  gt       lt div id  header  gt HEADER lt  div gt       lt div id  fixeddiv-top  gt FIXED DIV  TOP  lt  div gt       lt div id  content-container  gt           lt div id  content  gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt br gt CONTENT lt  div gt       lt  div gt       lt div id  fixeddiv-bottom  gt FIXED DIV  BOTTOM  lt  div gt   lt  div gt    And the CSS   html       height 100     body       height 100       margin 0      padding 0     container       width 600px      height 50       text-align center      display block      position relative     header       background  069      text-align center      width 100       height 80px     fixeddiv-top       background  AAA      text-align center      width 100       height 20px     content-container       height 100      content       text-align center      height 100       background  F00      margin 0 auto      overflow auto     fixeddiv-bottom       background  AAA      text-align center      width 100       height 20px

User · Answer

Quick Answer with Main Points  Pretty much the same answer as the best chosen answer from  Joum  to quicken your quest of trying to achieve the answer to the posted question and save time from deciphering whats going on in the syntax --  Answer  Set position attribute to fixed  set the top and bottom attributes to your liking for the element or div that you want to have an  auto  size of in comparison to its parent element and then set overflow to hidden    YourClass  amp  amp      YourId     position fixed     top 10px     bottom 10px     width 100     Do not forget width    overflow-y auto      Wallah  This is all you need for your special element that you want to have a dynamic height according to screen size and or dynamic incoming content while maintaining the opportunity to scroll

User · Answer

Try this  CSS    content     margin  0 auto    border  1px solid red    width 800px    position absolute    bottom 0px    top 0px    overflow auto     HTML    lt body gt   lt div id  content  gt     content goes here     lt  div gt   lt body gt    If you don t like absolute positioning in this case  just can play with making a parent and child div to this one  both with position relative   EDIT  Below should work  I just put the css inline for the moment     lt div style  margin 0 auto  width 800px  height 100   overflow hidden  gt   lt div style  border  1px solid red  width 800px  position absolute  bottom 0px  top 0px  overflow auto  gt     content goes here     lt  div gt   lt  div gt

User · Answer

You can do this assignment easily by using jquery  In this way  you can define number of row limitation  Furthermore  you can regular breakpoints height that want adding vertical scrolling  I must say that more than 3 rows get modify class and also height is 76px    x000D   x000D    document  ready function     x000D    var length     this  find  li   length  x000D    if  length  gt  3    x000D          parent   addClass  modify    x000D      x000D     x000D    for beauty   x000D   x000D  ul   x000D    margin  0 auto  x000D    width  50   x000D    border  1px solid  ccc  x000D    padding  3px  x000D    x000D   x000D  ul li   x000D    padding  3px  x000D    background   ccc  x000D    margin  2px 0  x000D    list-style  none  x000D    x000D   x000D    main class   x000D   x000D   modify   x000D    overflow-y  scroll  x000D    height  76px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt ul class  parent  gt  x000D     lt li gt item 1 lt  li gt  x000D     lt li gt item 2 lt  li gt  x000D     lt li gt item 3 lt  li gt  x000D     lt li gt item 4 lt  li gt  x000D   lt  ul gt  x000D   x000D   x000D

User · Answer

i think it s pretty easy  just use this css   content      width  100      height  what u wanna give      float  left     position  fixed     overflow  auto     overflow-y  auto     overflow-x  none      after this just give this class to ur div just like -   lt div class  content  gt your stuff goes in    lt  div gt

[html] Auto height div with overflow and scroll when needed

Examples related to html

Examples related to css

Examples related to scroll

Examples related to overflow