CODEWITHSUNDEEP
css
hguser
hguser

Reputation: 36028

set the overflow:auto with height 100%

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

I can not make it.

I have added the following css:

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

In fact, what I want is to make sure that the .content is always inside the .container. Like this:

pic.

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

Any ideas?

Upvotes: 10

Views: 18444

Answers (3)

hdavis84
hdavis84

Reputation: 37

Hope this is what you are looking for:

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

The 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;
}

The 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 that helps

Upvotes: 0

I29
I29

Reputation: 686

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

I have given

max-height:100%;
overflow:scroll;

to content.

Upvotes: 1

Wes Cossick
Wes Cossick

Reputation: 2933

This is close to the solution you are looking for, though you may need to adjust the padding and such for a more aesthetically pleasing 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;
    }

Upvotes: 5

Related Questions