CODEWITHSUNDEEP
csshtmltwitter-bootstraptwitter-bootstrap-3
Pol
Pol

Reputation: 25545

My html page is not scrolling in browsers

The page on my website is not scrolling. If there are more content than screen can fit you can not actually see it because scroll is not working. I'm not and CSS guru and I don't know if the problem is actually with CSS or HTML.

I've spend some time trying to understand the problem but i'm not a CSS guru so I hope someone can help me. The page is using tweeter-bootstrap and custom theme for it (which i did not write). When I don't include theme CSS file scrolling is working fine.

Part of my theme CSS file:

body {
    color: #000;
    font-family: 'Play', sans-serif;
    font-size: 16px;
    line-height: 25px;
    background: #e0dbcd url('../images/bg.jpg');
    letter-spacing:0.2px;
    overflow: hidden;
}

Upvotes: 15

Views: 58105

Answers (5)

Bloggrammer
Bloggrammer

Reputation: 1111

Remove overflow: hidden; from body as @Nabbit suggested or set overflow: scroll;

Edited:

The overflow property controls what happens to content that breaks outside of its bounds. By default, the property is visible i.e. content is not clipped when it proceeds outside its box.

overflow: hidden; means overflowing content will be hidden.

overflow: scroll; this is similar to hidden except users will be able to scroll through the hidden content.

Upvotes: 4

nclaudiuf
nclaudiuf

Reputation: 91

I agree will all above said, something to add I recently discovered in my code is the following CSS added. 

* {
  -moz-transition: .5s ease-in-out;
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
}

This also can interfere with the HTML & body scrolling. So I would recommend adding this transition effect in the specific component you desire to have the effect rather than on the HTML & body.

Upvotes: 0

JohnVanDijk
JohnVanDijk

Reputation: 3581

For someone who was in my scenario, this could be happening because of height: 100% for html, body in angular-material.css. Remove it and you're good to go.

Upvotes: 4

Alex139602
Alex139602

Reputation: 3

This may not be relevant for anyone, but i'm going to comment it here anyway - I was using a

pseudo :after

element on the body, and had applied

position: fixed

below a certain viewpoint to the css, however I had put

.classname

and not

.classname:after

on the element. I'll post the CSS below. what this did was fix the position of the page so it could not scroll.

full CSS that's relevant:

body {
  background-color: #5c2028;
  color: #ffffff;
  min-width: 100%;
  min-height: 100%;
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  box-sizing: border-box !important;
  overflow-x: hidden;
}

body.bg{
  background-image: url('../img/background.jpg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-clip: none;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

    body.bg:after{
    content : "";
    background-image: url('../img/hildasball_7_d_s_bg.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-clip: none;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    opacity : 1.0;
    z-index: -2;

    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    /*width: auto;
    height: auto;*/
}


@media (max-width: 767px) {
  body{
    min-height: 800px;
  }

/* Initially, i put body.bg not body.bg:after, which made things not scroll and i ended up getting confused as hell */

  body.bg:after{ 

    position: fixed;
  }

  .floatContact {
    float: none;
  }
}

Upvotes: 0

Nabbit
Nabbit

Reputation: 825

remove overflow: hidden; from body in the bootstrap-theme.css file.

Upvotes: 45

Related Questions