I can't remove bottom white portion of my website

StackOverflow https://stackoverflow.com/questions/23508069

Вопрос

I have made a website for my fake business but I can't get the area at the bottom of the page not to be there. So further information, I want the whole page to take up all of the browser window and not have any white space or have any scrolling on all computers, and on computers where the screen is taller or shorter i want the text to stay in the center between the navbar and end of page.

Demo here.

Thanks in advance.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Geer Creations</title>
        <!-- Icon -->
        <link rel="shortcut icon" href="logo-inverse.ico" >
        <!-- Fonts -->
        <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,700' rel='stylesheet' type='text/css'>
        <!-- Bootstrap core CSS -->
        <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
        <!-- Custom styles -->
        <link href="main.css" rel="stylesheet">    
    </head>
    <body>
        <div class="page">
            <div class="navbar navbar-default navbar-static-top">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="#"><img style="max-width:50px; margin-top: -7px;" src="http://i1284.photobucket.com/albums/a579/Ian_Geer/logo-inverse_zps3767ce84.png"></a>
                    </div>
                    <div class="collapse navbar-collapse" id=".navbar-ex1-collapse">
                        <ul class="nav navbar-nav">
                            <li class="active"><a href="#">Home</a></li>
                            <li><a href="#">Browse</a></li>
                            <li><a href="#">Contact</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li><a href="#">Sign Up</a></li>
                            <li><a href="#">Login</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="jumbotron">
            <div class="container">
                <h1>We combine strategy, creative thinking, & technology to drive results.</h1>
                <button type="button" class="btn btn-default btn-lg">Learn More</button>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    </body>
</html>

CSS:

body {
    font-family: 'Ubuntu', sans-serif;
}
.navbar {
    background-color: #fff;
    border: none;
    padding-top: 10px;
}
.navbar .nav {
    margin-top: 5px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #ff9721;
    background-color: #fff;
    font-weight: 700;
}
.navbar-default .navbar-nav > li > a {
    -webkit-transition: color .2s; /* For Safari 3.1 to 6.0 */
    transition: color .2s;
    color: #6E6E6E;
    background-color: transparent;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    -webkit-transition: color .2s; /* For Safari 3.1 to 6.0 */
    transition: color .2s;
    color: #ff9721;
    background-color: transparent;
}
h1 {
    color: #fff;
    text-align: center;
}
.jumbotron {
    padding-top: 190px;
    padding-bottom: 173px;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    background-color: #170D00;
    color: #fff;
    text-align: center;
}
.jumbotron h1 {
    font-size: 3em;
}
.form-control {
    margin-top: 5px;
    border-radius: 20px;
}
.btn {
    -webkit-transition: color .5s, border .5s; /* For Safari 3.1 to 6.0 */
    transition: color .5s, border .5s;
    margin-top: 50px;
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    width: 220px;
}
.btn:hover,
.btn:focus {
    -webkit-transition: color .5s, border .5s; /* For Safari 3.1 to 6.0 */
    transition: color .5s, border .5s;
    margin-top: 50px;
    color: #ff9721;
    background-color: transparent;
    border: 2px solid #ff9721;
    width: 220px;
}
Это было полезно?

Решение

You have a 30px margin from the bottom of your .jumbotron div. Add to your .jumbotron CSS class: 

margin-bottom: 0;

to remove it.

Example

Другие советы

If you need screen to be not scrollable then you can use,and provide height to the "body" position:fixed; which fixes the screen exactly what you need, but if you need scrollable website with bottom space covered, use margin-bottom:0; you have given padding-bottom, here is the css

.jumbotron {
padding-top: 190px;
padding-bottom: 173px;
margin-right: auto;
margin-left: auto;
width: 100%;
background-color: #170D00;
color: #fff;
text-align: center;
         margin-bottom:0;
  }

you can even try position:fixed, even that will help using on all browsers

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top