Question

我为我的假企业建立了一个网站，但我不能让页面底部的区域不在那里。所以进一步的信息，我希望整个页面占用所有的浏览器窗口，没有任何空白区域或在所有计算机上滚动，在屏幕更高或更短的计算机上我希望文本留在中心在导航栏和页面末尾之间。

提前致谢。

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;
}

Answer 1

您的30px div底部有.jumbotron页边距。添加到您的.jumbotron CSS类：

margin-bottom: 0;

删除它。

Example

Answer 2

如果您需要屏幕不可滚动，那么您可以使用，并为＆＃34; 正文＆＃34;提供高度。位置是：固定;它确切地修复了你需要的屏幕，但如果你需要覆盖底部空间的可滚动网站，请使用margin-bottom：0;你给了padding-bottom，这里是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;
  }

你甚至可以尝试定位：修复，甚至可以帮助在所有浏览器上使用

我无法移除网站底部的白色部分

2 个答案: