Geek Answers Handbook

Set overflow: auto with a height of 100%

On my page, I have an element with a height of 100% based on its parent; however, I want this element to scroll vertically automatically when necessary. This is my example .

I can not do it.

I added the following css:

height:100%; max-height:100%;

In fact, I want .content always be inside .container . Like this:

pic.

(By the way, in the above image I use max-height:400px , which should be avoided, since its maximum height should be based on .container height)

Any ideas?

+4
source share
4 answers

This is close to the solution you are looking for, although you may need to customize the gasket and one for a more aesthetic look: http://jsfiddle.net/GJ5yM/

New CSS:

  .content{ height:100%; position: absolute; } .windowcontent{ background-color: white; padding: 10px; max-height:100%; position:relative; overflow-y:auto; }
+1
source

Check out this fiddle. http://jsfiddle.net/siyakunde/qng67/1/ Is that what you need?

I gave

 max-height:100%; overflow:scroll;

for content.

0
source

Hope this is what you are looking for:

http://jsfiddle.net/CjV6k/1/

CSS:

 #scrollFrameWrap { width: 400px; margin: 20px auto; background: #000; border-radius: 8px; box-shadow: 0px 1px 15px 0 #fff inset; padding: 3px 10px 10px; } .title { text-align: center; font-size: 12px; color: #aaa; } #parentElement { height: 150px; padding-bottom: 10px; margin-bottom:10px; } #scrollFrame { width: 380px; height: 100%; overflow: scroll; overflow-x: hidden; background: #fff; border-radius: 4px; padding: 10px; }

HTML:

 <div id="scrollFrameWrap"> <p class="title">Title</p> <div id="parentElement"> <div id="scrollFrame"> <p>This is a sentence, hope you like it.</p> <p>This is a sentence, hope you like it.</p> <p>This is a sentence, hope you like it.</p> <p>This is a sentence, hope you like it.</p> <p>This is a sentence, hope you like it.</p> <p>This is a sentence, hope you like it.</p> <p>This is a sentence, hope you like it.</p> <p>This is a sentence, hope you like it.</p> <p>This is a sentence, hope you like it.</p> <p>This is a sentence, hope you like it.</p> </div> </div> </div>

See if it helps

0
source

only

  overflow-y: scroll;

and set the height no matter what you want.

0
source

More articles:


All Articles