CODEWITHSUNDEEP
htmlcss
Poppy
Poppy

Reputation: 45

Scrollable Div in CSS

I am creating a page with a header and footer, and a middle content div that can contain a variable amount of content that should be scrollable for the middle div only. The whole page should fill any viewport/screen size, 100% height and 100% width.

I am using this CSS:

*{margin:0;padding:0}
html, body {height:100%;width:100%;overflow:hidden}
table {height:100%;width:100%;table-layout:static;border-collapse:collapse}
.header {border-bottom:2px solid #000}
.footer {border-top:2px solid #000}
.tdcontent {height:100%}
.content {height:100%; overflow:auto;}

I am using this HTML:

<table>
<tr><td class="header"><div><?php include 'header.htm' ?></div></td></tr>
<tr><td class="tdcontent"><div class="content"><?php include 'content.htm' ?></div></td> </tr>  
<tr><td class="footer"><?php include 'footer.htm' ?></td></tr>
</table>

The above works fine in Chrome. If I insert more content than the screen can show, a vertical scrollbar appears for the middle content div, as expected. But in both IE and Firefox, no scroll bar appears and the content extends beyond the bottom of the page. Any ideas how to fix this problem? I have tried iframes as a cross-browser solution and it works for all of them, but for SEO reasons I do not want to use iframes.

EDIT: the problem seems to be setting height at 100%. Chrome likes it, but IE and FF seem to want fixed height in px only.

EDIT 2: I found an answer on SO at CSS 100% Height, and then Scroll DIV not page

Upvotes: 0

Views: 190

Answers (2)

Lucian
Lucian

Reputation: 24

Try this:

.content {overflow:scroll-y}

My bad, I was really tired when I wrote this ^

It was .content {overflow-y:scroll}

Upvotes: 0

Arthur Yakovlev
Arthur Yakovlev

Reputation: 9309

overflow:auto;// right and bottom scroll
overflow-y:auto;//only right scroll
overflow-x:auto;//only bottom scroll

UPDATE:

But this is very cool library for this task https://github.com/noraesae/perfect-scrollbar

Upvotes: 2

Related Questions