Overlap between container and body

https://github.com/TurtleWolf/expressTemplate/issues/1

live sample on heroku

I’m getting an overlap between container-fluid and the body. I’ve tried making the container transparent and different margins or padding for the container, but If I guess wider than the current screen I get the grey scroll bar back. I’ve used cover before to fix similar issues horizontally, but this does not work vertically.

CSS

        body {
background: rgba(183,222,237,1);
background: -moz-linear-gradient(-45deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 27%, rgba(33,180,226,1) 62%, rgba(183,222,237,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(183,222,237,1)), color-stop(27%, rgba(113,206,239,1)), color-stop(62%, rgba(33,180,226,1)), color-stop(100%, rgba(183,222,237,1)));
background: -webkit-linear-gradient(-45deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 27%, rgba(33,180,226,1) 62%, rgba(183,222,237,1) 100%);
background: -o-linear-gradient(-45deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 27%, rgba(33,180,226,1) 62%, rgba(183,222,237,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 27%, rgba(33,180,226,1) 62%, rgba(183,222,237,1) 100%);
background: linear-gradient(135deg, rgba(183,222,237,1) 0%, rgba(113,206,239,1) 27%, rgba(33,180,226,1) 62%, rgba(183,222,237,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed', GradientType=1 );

        
.container-fluid {
    background-color:rgba(0, 0, 0, 0.0);
    padding-bottom: 2%;
    margin-bottom: 2%;
        }  

HTML, meta tags etc… redacted

<!doctype html>
<html class="no-js" lang="">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="manifest" href="site.webmanifest">
    <link rel="apple-touch-icon" href="icon.png">
    <!-- Place favicon.ico in the root directory -->
    <!-- Boot Strap 4 CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Gloria+Hallelujah|Homemade+Apple|Indie+Flower|Ubuntu" rel="stylesheet">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="container-fluid text-center">
        <div class="row text-justify">
            <div class="col-sm left_fl8d">
                <h4 class="text-left"><a href="https://turtlewolf.github.io/expressTemplate/"><kbd>git clone https://github.com/TurtleWolf/expressTemplate.git</kbd><br></a></h4>
                <!-- <p>Hello world! This is HTML5 Boilerplate.</p> -->
        <code>
        <mark>"dependencies"</mark>: {<br>
        "body-parser": "^1.18.2",<br>
        "cors": "^2.8.4",<br>
        "express": "^4.16.2",<br>
        "nodemon": "^1.12.1",<br>
        "serve-favicon": "^2.4.5"<br>
        },<br>
</code>
// install <mark>"dependencies"</mark> listed in package.json<br>
<kbd>npm install</kbd><br><br>
<kbd>nodemon</kbd><br>
// start server and listen for file changes on process.env.PORT<br>
<br> // console.log("omg");<br>
<code>omg</code><br><br>
<p><a href="https://youtu.be/5T1YDRWaa3k?t=8m">The first 5 out of 10 assignments</a> to get certified at <a href="https://www.freecodecamp.org/challenges/timestamp-microservice">FreeCodeCamp.com</a> cover the same basic setup, Body-Parser, Cors, Express & Nodemon. I've added favicon.ico in the public directory along with HTML5 boilerplate & BootStrap 4 in index.html, the .gitignore excludes everything in the node-modules directory & Procfile for deployment to Heroku</p>
</div>
<!-- end of column1 -->
            
            
<div class="col-sm mid_fl8d">
                // node version manager, cloud9 defaults to v6.11.2<br>
                <kbd>nvm install 8</kbd><br>
                // sudo apt-get install mongodb-org<br>
                <kbd>sudo apt-get install --save mongodb-org</kbd><br>
                // or maybe just<br>
                <kbd>npm install mongodb --save</kbd><br>
                // then<br>
                <kbd>mongod --smallfiles</kbd><br><br>
            <h3><a href="http://www.clementinejs.com/tutorials/tutorial-beginner.html">API (application program interface)</a></h3>
            <br><br><br>
<iframe class="dropShadoe" width="560" height="315" src="https://www.youtube.com/embed/DbDuBihxHzI" frameborder="0" allowfullscreen></iframe>    <br>
    <br>
    <br>
    <br>
    <section class="text-center">
    <a href="http://turtlewolfe.com">
    <img src="favicon.ico" alt="favicon" height="16" width="16">
    <img src="favicon.ico" alt="favicon" height="30" width="30">
    <img src="favicon.ico" alt="favicon" height="42" width="42">
    <img src="favicon.ico" alt="favicon" height="65" width="65">
    <kbd>http://turtlewolfe.com</kbd>
    <img src="favicon.ico" alt="favicon" height="65" width="65">
    <img src="favicon.ico" alt="favicon" height="42" width="42">   
    <img src="favicon.ico" alt="favicon" height="30" width="30">  
    <img src="favicon.ico" alt="favicon" height="16" width="16">
    </a>
    </section>
</div>
<!-- end of column2 -->
            <div class="col-sm right_fl8d">

                <h3><a href="https://devcenter.heroku.com/articles/heroku-cli#debian-ubuntu">Heroku CLI</a></h3>
                <kbd>heroku --version</kbd><br>
                <kbd>npm install -g heroku-cli</kbd><br>
                <h3><a href="https://devcenter.heroku.com/articles/git">Deploying with Git</a></h3>
                <kbd>heroku login</kbd><br>
                <kbd>heroku create</kbd><br>
                <kbd>git remote -v</kbd><br>
                <kbd>heroku git:remote -a stark-spire-40922</kbd><br>
                <kbd>git push heroku master</kbd><br><br>
    <section class="text-center">
    <a href="http://turtlewolfe.com">       
    <img src="favicon.ico" alt="favicon" height="16" width="16">
    <img src="favicon.ico" alt="favicon" height="30" width="30">
    <img src="favicon.ico" alt="favicon" height="42" width="42">
    <img src="favicon.ico" alt="favicon" height="65" width="65">
    <img src="favicon.ico" alt="favicon" height="42" width="42">   
    <img src="favicon.ico" alt="favicon" height="30" width="30">  
    <img src="favicon.ico" alt="favicon" height="16" width="16">
    </a>
    </section>    
            </div><!-- end of column3 -->
        </div><!-- end of div class row -->
    </div><!-- end of container div -->


<!-- !!!!!!!!!!!!!!!!!!!!!!!!THIS IS WHERE THE OVERLAP IS SEEN!!!!!!!!!!!!!!!!!!!!! -->


    <script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
    <script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
    <script>
        window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>');
    </script>

    <!-- Boot Strap 4 CDN -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>

    <script src="js/plugins.js"></script>
    <script src="js/main.js"></script>

</body>

</html>

This appears to have been resolved.

nor perfectly… adding “height: 100vh” to the container-fluid div helped, but only on the original screen load, as soon as I scroll up it comes back. But I think I can get the background to lock in place and scroll over it

body {
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.container-fluid {
  height: 100vh;
 }

adding these bits to the CSS seems to have gotten it

Remove the height:100vh or use min-height because you have limited your container to the height of the viewport and anything below the fold will be considered overflow and discounted as far as the flow of the document goes. This will not matter until you try and add another div underneath the fluid container and you will find that the content will overlap each other because it has flowed out of its 100% container.

The fixed background on its own should fix the issue anyway :slight_smile: (unless I missed something as I’m not on a computer at the moment).

1 Like

Thank you

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.