I want only content being scrollable

Question

This code works in Chrome as I want but not in IE or Firefox. To be more clear and satisfy SO constrains about the comment-code ratio in a post I'd like that only the content area being scrollable when the viewport goes bellow 300px or the content simply does not fit. Actually IE is my only concern. How could I achieve the same behavior under IE >= v10.

* {
  font-family: Helvetica, Sans;
  border: 0px;
  margin: 0px;
  padding: 0px;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
#table {
  display: table;
  height: 100%;
  width: 100%;
}
.navBar {
  width: auto;
  height: 72px;
  overflow: auto;
  border-bottom: 1px solid #bbb;
  display: table-row;
}
.results {
  background: gray;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: table-row;
}
.results > div {
  height: 100%;
  overflow: auto;
}
@media screen and (max-height: 300px) {
  footer {
    display: none;
  }
}

<body>
  <div id="table">
    <div class='navBar'>header</div>
    <div class='results'>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at
        venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque
        ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis
        lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a
        venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales
        leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend
        sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div>
    </div>
    <footer>footer</footer>
  </div>
</body>

media queries aren't supported [below IE8](http://caniuse.com/#feat=css-mediaqueries), but could you possibly make a media query that checks your viewport, and sets overflowY: to scroll? that way you're reinforcing this. I'd also like to point out that the * selector is pretty bad practise - try placing those rules into your **html, body** rule instead. — jbutler483, Jan 21 '15 at 12:16
Thank you for your hint. Fortunately I don't have to care about IE versions lower than 10. About the code the thing is I copied it from [here](http://stackoverflow.com/questions/27164889/vertical-div-expansion-w-o-fixed-heights) and modified a little bit: — apreg, Jan 21 '15 at 12:20

score 0 · Answer 1 · answered Jan 21 '15 at 19:39

What do you think? Is it a solution? I got the idea from here

<div class="table">
<!-- Header -->
<div class="row header">Header</div>
<div class="row content">
    <!-- Use inner div's with position relative and absolute, to fix cell height, making it overflow correctly. -->
    <div class="wrapper">
        <div class="inner-content">
            <input type="text" />
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus sem quam, quis finibus leo pretium sit amet. Sed imperdiet venenatis enim at sagittis. Praesent porta purus nec aliquet pellentesque. Nunc bibendum urna non risus lacinia, at venenatis nisl interdum. Duis porta tristique augue vel dictum. Curabitur feugiat tincidunt risus eget semper. Aliquam quis cursus nibh, feugiat commodo arcu. Aliquam non dolor vel ex dapibus interdum vitae nec lorem. Phasellus fermentum neque ut nibh hendrerit tempus. Pellentesque sit amet ligula dui. Donec laoreet est erat. Etiam aliquet sem sit amet quam tempus aliquam. Vivamus eleifend nunc ipsum, a viverra neque efficitur at. Duis mi nisl, accumsan quis ex et, aliquam lobortis lectus. Vestibulum luctus diam eu mattis gravida. Quisque nisi felis, posuere vitae purus sit amet, pellentesque fermentum enim. Proin eu dui ex. Nunc nec erat sed augue rhoncus gravida. Suspendisse potenti. Pellentesque mattis lorem felis, a venenatis odio gravida eget. Nam dictum dui efficitur pellentesque feugiat. Aliquam quis velit sit amet nibh rhoncus lacinia. Ut sed aliquet odio. Phasellus ut eros a nulla viverra convallis aliquet vel risus. Integer eu tellus congue, sodales leo et, placerat nisi. Quisque semper bibendum tortor. Maecenas sed est sit amet neque convallis lacinia. Praesent vitae dapibus nibh, accumsan lobortis velit. Mauris sed imperdiet lectus. Nunc est turpis, lobortis sit amet hendrerit eu, eleifend sed dui. Vivamus vulputate semper elit, vitae finibus metus mollis sed.</div>
            <div>Some text.</div>
        </div>
    </div>
</div>
<!-- footer -->
<div class="row footer">Footer</div>

html, body {
height: 100%;
max-height: 100%;
padding:0px;
margin:0px;
}
.table, .row {
    outline: none;
    border: none;
    outline-style: none;
    vertical-align: top;
    text-align: left;
}
.table {
    border-collapse: collapse;
    display: table;
    table-layout: fixed;
    /* This will ensure the cells within the table will keep there width. */
    width: 100%;
    height: 100%;
}
.row {
    display: table-row;
    width: 100%;
}
.header {
    background-color: red;
}
.content {
    height: 100%;
}
.footer {
    background-color: green;
}
.wrapper {
    position:relative;
    height: 100%
}
.inner-content {
    overflow: auto;
    position: absolute;
    top: 0;
    right:0;
    bottom: 0;
    left: 0;
}
@media screen and (max-height: 300px) {
    .footer {
        display: none !important;
    }
}

Tiago · Answer 2 · 2015-01-21T22:26:35.473

0

I'm not entirely sure what you mean by "only content area being scrollable". This was my interpretation of it:

http://jsfiddle.net/5q1Lgsy6/11/

By using a position: fixed width:100% top bar you can make it so that only the content below it will be scrollable.

I ditched all display: table tags, you don't really need them to organize your content unless that content is supposed to be displayed on an actual table.

Here's the CSS:

* {
    font-family: Helvetica, Sans;
    border: 0px;
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
}
#table {
    height: 100%;
    width: 100%;
}
.navBar {
    background-color: white;
    top: 0;
    width: 100%;
    height: 72px;
    border-bottom: 1px solid #bbb;
    position: fixed;
}
.results {
    margin-top: 72px;
    background: gray;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.results > div {
    height: 100%;
    overflow: auto;
}
@media screen and (max-height: 300px) {
    footer {
        display: none;
    }
}

EDIT: if you also want the footer to be permanently fixed add this to your CSS:

footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 20px;
    background-color: white;
}

edited Jan 21 '15 at 22:26

answered Jan 21 '15 at 21:14

Tiago

4,233
13
46
70

Thank you for your answer. Please check my comment to see what I wanted to achieve. As you can see only the content area has a scrollbar. Sorry for my vague wording. – apreg Jan 23 '15 at 07:20
@apreg Well on my end there's no scrollbar at all, so I sincerely do not know what you want. Do you want the browser's scrollbar to not appear at all and use a smaller scrollbar for the content section alone? – Tiago Jan 23 '15 at 09:38
"Do you want the browser's scrollbar to not appear at all and use a smaller scrollbar for the content section alone?" - Exactly, but I've already solved it one way. This question is related to this one: http://stackoverflow.com/questions/27057298/css-sticky-footer-header-with-scrollable-content. Maybe it makes more clear my concerns. So the code in my first post did what I want but only in Chrome. I wanted a solution which works the same way but in IE too, 'cause I run it on Windows Phone. – apreg Jan 23 '15 at 10:32

score -2 · Answer 3 · answered Jan 21 '15 at 11:19

-2

there is a way to write css for IE

IE-6 ONLY

* html #div { 
    height: 300px;
}

IE-7 ONLY

*+html #div { 
    height: 300px;
}

IE-8 ONLY

#div {
  height: 300px\0/;
}

IE-7 & IE-8

#div {
  height: 300px\9;
}

NON IE-7 ONLY:

#div {
   _height: 300px;
}

Hide from IE 6 and LOWER:

#div {
   height/**/: 300px;
}

html > body #div {
      height: 300px;
}

answered Jan 21 '15 at 11:19

equerambug

47
3

what *is* this? and how does it affect the scrolling as mentioned in the question? – jbutler483 Jan 21 '15 at 11:58
That's what I was about to ask :) – apreg Jan 21 '15 at 12:00
well i will suggest that if you want to achieve your goal on IE then you have to use IE `css` – equerambug Jan 21 '15 at 12:06
This has absolutely *nothing* to do with OP's question (bar the 'IE' part). Please read the question, and edit your answer, or delete this as it bears no help to the OP. – jbutler483 Jan 21 '15 at 12:12

I want only content being scrollable

3 Answers3