My preference is for only the content to have the ability to scroll

Question

My preference is for only the content to have the ability to scroll

I have a code snippet that functions correctly in Chrome but not in IE or Firefox. I want to make only the content area scrollable when the viewport is less than 300px or if the content overflows. My main concern is with IE, specifically version 10 and above. How can I achieve this same behavior for IE?

* {
  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...ex 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>

html css

Answer 1

Answer №1

What are your thoughts on this potential solution? Is this the answer? I found inspiration from this source

<div class="table">
<!-- Header -->
<div class="row header">Header</div>
<div class="row content">
    <!-- Utilize inner divs with position relative and absolute to enforce cell height, allowing for correct overflow.-->
    <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, al...
            <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;
    }
}

Answer 2

What are your thoughts on this potential solution? Is this the answer? I found inspiration from this source

<div class="table">
<!-- Header -->
<div class="row header">Header</div>
<div class="row content">
    <!-- Utilize inner divs with position relative and absolute to enforce cell height, allowing for correct overflow.-->
    <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, al...
            <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;
    }
}

Answer 3

Answer №2

I'm a bit uncertain about your request for the "only content area being scrollable". Here's what I understand from it:

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

By implementing a position: fixed and width:100% top bar, you can ensure that only the content below it will have scrolling functionality.

I removed all instances of display: table tags because they are not necessary for layout organization unless the content is specifically intended for a table display.

Below is the CSS code snippet used:

* {
    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: To also keep the footer fixed at the bottom, include the following in your CSS:

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

Answer 4

I'm a bit uncertain about your request for the "only content area being scrollable". Here's what I understand from it:

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

By implementing a position: fixed and width:100% top bar, you can ensure that only the content below it will have scrolling functionality.

I removed all instances of display: table tags because they are not necessary for layout organization unless the content is specifically intended for a table display.

Below is the CSS code snippet used:

* {
    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: To also keep the footer fixed at the bottom, include the following in your CSS:

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

Answer 5

Answer №3

Want to style your website for different versions of Internet Explorer?

For IE-6:

* html #div { 
    height: 300px;
}

For IE-7:

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

For IE-8:

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

For IE-7 & IE-8:

#div {
  height: 300px\9;
}

For Non-IE-7 only:

#div {
   _height: 300px;
}

To hide from IE 6 and lower versions:

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

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

Answer 6

Want to style your website for different versions of Internet Explorer?

For IE-6:

* html #div { 
    height: 300px;
}

For IE-7:

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

For IE-8:

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

For IE-7 & IE-8:

#div {
  height: 300px\9;
}

For Non-IE-7 only:

#div {
   _height: 300px;
}

To hide from IE 6 and lower versions:

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

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

My preference is for only the content to have the ability to scroll

Answer №1

Answer №2

Answer №3

Similar questions

Exploring the root of an abnormal behavior on Bootstrap 4

Creating an email-friendly button in Outlook without using images by styling a hyperlink with padding

Is it possible to alter the text color within a Semantic UI vertical menu?

Ways to use flexbox to position an image beside an input field in the center

Padding for Bootstrap card on mobile devices

Is it possible to modify the dirpagination filter in AngularJS from an input box to a select box?

Is it possible for Google to crawl links that are generated using JavaScript?

Issues arise when attempting to use the Android KeyUp, KeyDown, and KeyPress events in conjunction with Angular2

Using a CSS gradient with a variable in React.js - A guide to implementation

Tips for positioning a popup in the center of a window

SVG with a background image that is centered

Enhancing images with dual captions using CSS hover effects

The horizontal layout for the Bootstrap 3 sub menu is not displaying beneath the dropdown as expected

Save a specific row from the table into a basic array

Contact Form with Bootstrap 4 Font Awesome Icons Positioned Beside

Centering text in a D3 donut chart

Access data from an array using xpath in Chrome Console

Ways to eliminate the Horizontal scroll bar

What steps can be taken to modify Gmail settings so that annotations are visible in the promotions tab?

Angular not updating the values in real time