CODEWITHSUNDEEP
htmlcssscrollbar
Roxana Miron
Roxana Miron

Reputation: 1

Fixing scrollbar issue in IE

If a write this code in html, the scrollbar appears in IE but in Chrome and Microsoft Edge the scrollbar is doubled.

If I delete this code, the scrollbar appears only in Chrome and Microsoft Edge.

How can I fix this problem? 

<style type="text/css">
html,body{
    height:100px;
    min-height:100%;       
    overflow:auto;
    border-top:0px;  

}
</style>

Upvotes: 0

Views: 1113

Answers (2)

Andrii B.
Andrii B.

Reputation: 37

When reducing the browser window to this value, the layer ceases to change its size and a horizontal scroll bar appears. Using the overflow-x property, scrollbars are hidden.

Try using these values:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Scroll bars</title>
  <style>
   html { overflow-x: hidden; }
   div { 
    min-width:  800px; /* Minimum width */
    background: #fc0;  /*Background color*/
    padding: 10px;  /*Fields around text */
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

The overflow-x and overflow-y properties are included in the CSS3 specification and are not validated when checking styles on CSS2.1.

You can also use СSS code:

<style type="text/css">
    html,body{
        height:100px;
        min-height:100%;       
        overflow-y: scroll;
        border-top:0px;  

    }

Good luck

Upvotes: 1

mindmaster
mindmaster

Reputation: 1888

Instead of overflow:auto; change it to overflow-y: scroll;

<style type="text/css">
    html,body{
        height:100px;
        min-height:100%;       
        overflow-y: scroll;
        border-top:0px;  

    }

Tested in IE 11+

Upvotes: 0

Related Questions