CODEWITHSUNDEEP
htmlcss
user3689167
user3689167

Reputation: 873

CSS: Scroll bars on container div when child overflows

I have two divs:

<div class="body">
    <div class="body-content">
        <h1> HI </h1>
    </div>
</div>

"body" has the following css:

.body {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: black;
}

"body-content" has the following css:

.body-content {
     background-color: white;
     height: 100%;
     width: 90%;
     margin-left: 5%;
     margin-right: 5%;
}

This gives the the body-content nice black margins on the left and right side. However, I would like the body div to have the scroll bars (the parent) when the child div (body-content) overflows. Right now I can only get the child div to get the scroll bars.. any ideas?

Upvotes: 1

Views: 1162

Answers (4)

Nisha Sharma
Nisha Sharma

Reputation: 255

Just add overflow: scroll to .body style. If you want vertical scroll then use overflow-y:scroll or for horizontal scroll use overflow-x: scroll

Upvotes: 0

AVAVT
AVAVT

Reputation: 7143

Make the 2 following changes in your css:

.body {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: black;
    overflow: auto; /* Added */
}
.body-content {
     background-color: white;
     min-height: 100%; /* Changed from height: 100% */
     width: 90%;
     margin-left: 5%;
     margin-right: 5%;
}

Demo: http://jsfiddle.net/hpng1xjr/

Upvotes: 2

Prajwal Shrestha
Prajwal Shrestha

Reputation: 553

you should try this

 overflow: auto;

Upvotes: 0

Sparafusile
Sparafusile

Reputation: 4966

Take a look at the overflow CSS here:

http://www.w3schools.com/cssref/pr_pos_overflow.asp

Specifically, you should be able to do this:

overflow: scroll;

or, if you only want to scroll vertically:

overflow-y: scroll;

Upvotes: 0

Related Questions