CODEWITHSUNDEEP
cssoverflow
samad montazeri
samad montazeri

Reputation: 1273

Fixing a title and scroll the rest of content

I want to place a title and a content div inside a container div. title div, (which has not a known constant height) should stay in top of container. content div comes below the title div and it should not overflow container. in overflow situation only the content div should scroll.

please take a look at this picture:

desired behaviour

this is what i tried:

<div class="container">
    <div class="title">title</div>
    <div class="content">
        a very long content...
    </div>
</div>

CSS:

.container{
    width: 300px;
    height: 500px;
}
.title{
    background-color: gray;
}
.content{
    height: 100%;/*which is obviously wrong*/
    overflow: auto;
}

and i don't want to use js for this.

Upvotes: 1

Views: 1877

Answers (2)

Chris Thompson
Chris Thompson

Reputation: 93

In order to get the overflow to work you will have to give the content div a height. Here is a JSFiddle that looks like what you want, although to make it more dynamic you might want to look at javascript.

.container{
  width: 300px;
  height: 500px;
}
.title{
  height: 1em;
  background-color: gray;
  line-height:1em;
  text-align:center;
  border:1px solid black;
}
.content{
  height:400px;
  overflow: auto;
  padding:10px;
  border:1px solid black;
}

Also I added some styles to match your picture.

http://jsfiddle.net/m0pum906/

Upvotes: 1

Mohd.Zafranudin
Mohd.Zafranudin

Reputation: 454

I suggest you add position:fixed to your container class in CSS.

.container{
    position:fixed;
    width: 300px;
    height: 500px;
}

Hope this helps :)

Upvotes: 0

Related Questions