Scrollbar without fixed height/Dynamic height with scrollbar

Question

I have this HTML structure:

    

        
Dynamic height without scrollbar
    
         


        
                      

              相关标签:
       
      

Answer 1

You will have to specify a fixed height, you cannot use 100% because there is nothing for this to be compared to, as in height=100% of what?

Edited fiddle:

http://jsfiddle.net/6WAnd/4/

Answer 2

With display grid you can dynamically adjust height of each section.

#body{
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
}

Add the above code and you will get desired results.

Sometimes when many levels of grids are involved css wont restrict your #content to 1fr. In such scenarios use:

#content{
  max-height:100%;
}

Answer 3

The JS answer to this question is:

http://jsfiddle.net/6WAnd/20/

or something similar

Answer 4

 <div id="scroll">
    <p>Try to add more text</p>
 </div>

here's the css code

#scroll {
   overflow-y:auto;
   height:auto;
   max-height:200px;
   border:1px solid black;
   width:300px;
 }

here's the demo JSFIDDLE