我無法刪除網站底部的白色部分
[英]I can't remove bottom white portion of my website
問題描述
我已經為假冒公司建立了一個網站，但無法在頁面底部找到該區域。 因此，進一步的信息是，我希望整個頁面占用瀏覽器的所有窗口，並且在所有計算機上以及屏幕更高或更短的計算機上都沒有空格或滾動，我希望文本停留在中間在導航欄和頁面末尾之間。
提前致謝。
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;
}
2 個解決方案
解決方案1
3 已采納 2014-05-07 03:16:21
解決方案2
0 2014-05-07 03:42:01
如果您需要屏幕不可滾動，則可以使用，並在“ 正文 ”位置提供高度：固定； 它可以完全根據您的需求來固定屏幕，但是如果您需要覆蓋底部空間的可滾動網站，請使用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;
}
您甚至可以嘗試position：fixed，即使這將有助於在所有瀏覽器上使用
如何刪除網頁底部的空白？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.