html - 我网站底部的黑框

Question

我的网站底部有一个黑框。我试过从网站上的最后一件事中删除填充和边距，但它不起作用。我还想让白色部分 (class="content") 从屏幕中间开始。这是使用 Bootstrap 。

    body {
        width: 100%;
        height: 100%;
        font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
        color: #fff;
        background-color: #000;
    }
    
    html {
        width: 100%;
        height: 100%;
    }
    
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin: 0 0 35px;
        text-transform: uppercase;
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 700;
        letter-spacing: 1px;
    }
    
    p {
        margin: 0 0 25px;
        font-size: 18px;
        line-height: 1.5;
    }
    
    @media(min-width:767px) {
        p {
            margin: 0 0 35px;
            font-size: 20px;
            line-height: 1.6;
        }
    }
    
    a {
        color: #219ab3;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
    }
    
    a:hover,
    a:focus {
        text-decoration: none;
        color: #11505d;
    }
    
    .light {
        font-weight: 400;
    }
    
    .navbar-custom {
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255,255,255,.3);
        text-transform: uppercase;
        font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
        background-color: #000;
    }
    
    .navbar-custom .navbar-brand {
        font-weight: 700;
    }
    
    .navbar-custom .navbar-brand:focus {
        outline: 0;
    }
    
    .navbar-custom .navbar-brand .navbar-toggle {
        padding: 4px 6px;
        font-size: 16px;
        color: #fff;
    }
    
    .navbar-custom .navbar-brand .navbar-toggle:focus,
    .navbar-custom .navbar-brand .navbar-toggle:active {
        outline: 0;
    }
    
    .navbar-custom a {
        color: #fff;
    }
    
    .navbar-custom .nav li.active {
        outline: nonte;
        background-color: rgba(255,255,255,.3);
    }
    
    .navbar-custom .nav li a {
        -webkit-transition: background .3s ease-in-out;
        -moz-transition: background .3s ease-in-out;
        transition: background .3s ease-in-out;
    }
    
    .navbar-custom .nav li a:hover,
    .navbar-custom .nav li a:focus,
    .navbar-custom .nav li a.active {
        outline: 0;
        background-color: rgba(255,255,255,.3);
    }
    
    @media(min-width:767px) {
        .navbar {
            padding: 20px 0;
            border-bottom: 0;
            letter-spacing: 1px;
            background: 0 0;
            -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
            -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
            transition: background .5s ease-in-out,padding .5s ease-in-out;
        }
    
        .top-nav-collapse {
            padding: 0;
            background-color: #000;
        }
    
        .navbar-custom.top-nav-collapse {
            border-bottom: 1px solid rgba(255,255,255,.3);
        }
    }
    
    .intro {
        display: table;
        width: 100%;
        height: auto;
        padding: 100px 0;
        text-align: center;
        color: #fff;
        background: url(../img/intro-bg.jpg) no-repeat bottom center fixed;
        background-color: #000;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
        -o-background-size: cover;
    }
    
    .intro .intro-body {
        display: table-cell;
        vertical-align: middle;
    }
    
    .intro .intro-body .brand-heading {
        font-size: 40px;
    }
    
    .intro .intro-body .intro-text {
        font-size: 18px;
    }
    
    @media(min-width:767px) {
        .intro {
            height: 100%;
            padding: 0;
        }
    
        .intro .intro-body .brand-heading {
            font-size: 80px;
        }
    
        .intro .intro-body .intro-text {
            font-size: 20px;
        }
    }
    
    @-webkit-keyframes pulse {    
        0 {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    
        50% {
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
        }
    
        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
    
    @-moz-keyframes pulse {    
        0 {
            -moz-transform: scale(1);
            transform: scale(1);
        }
    
        50% {
            -moz-transform: scale(1.2);
            transform: scale(1.2);
        }
    
        100% {
            -moz-transform: scale(1);
            transform: scale(1);
        }
    }
    
    ::-moz-selection {
        text-shadow: none;
        background: #fcfcfc;
        background: rgba(255,255,255,.2);
    }
    
    ::selection {
        text-shadow: none;
        background: #fcfcfc;
        background: rgba(255,255,255,.2);
    }
    
    img::selection {
        background: 0 0;
    }
    
    img::-moz-selection {
        background: 0 0;
    }
    
    body {
        webkit-tap-highlight-color: rgba(255,255,255,.2);
    }
    
    .content {
    	background-color: white;
    	color: black;
    	margin: 0;
    	padding: 0;
    }

<!DOCTYPE html>
    <html lang="en">
    
    <head>
    
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
    
        <title>Ingraham PE</title>
    
        <!-- Bootstrap Core CSS -->
        <link href="css/bootstrap.min.css" rel="stylesheet">
    
        <!-- Custom CSS -->
        <link href="css/main.css" rel="stylesheet">
    
        <!-- Custom Fonts -->
        <link href="font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css">
        <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    
    </head>
    
    <body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">
    
        <!-- Navigation -->
        <nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                        <i class="fa fa-bars"></i>
                    </button>
                    <a class="navbar-brand" href="index.html">
                        <span class="light">Home</span>
                    </a>
                </div>
    
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
                    <ul class="nav navbar-nav">
                        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                        <li class="hidden">
                            <a href="#page-top"></a>
                        </li>
                        <li>
                            <a href="about.html">About</a>
                        </li>
                        <li>
                            <a href="contact.html">Contact</a>
                        </li>
                        <li class="dropdown">
                            <a href="assignments.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Assignments <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="wt.index">Weight Training</a></li>
                                <li><a href="pf.index">Personal Fitness</a></li>
                                <li><a href="la.index">Lifetime Activities</a></li>
                                <li><a href="ts.index">Team Sports</a></li>
                            </ul>
                        </li>
    					<li>
                            <a href="elvig.html">Mr.Elvig</a>
                        </li>
                    </ul>
                </div>
                <!-- /.navbar-collapse -->
            </div>
            <!-- /.container -->
        </nav>
    
        <!-- Content -->
        <header class="intro">
            <div class="intro-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <h1 class="brand-heading">About</h1>
                            <p class="intro-text"></p>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    	
    	<div class="content">
    		<p class="content-text">“Intelligence and skill can only function at the peak of their capacity when the body is healthy and strong.”  John F. Kennedy</p>
    		<p class="content-text">Physical education can plays a large role in the health of the future generation. It has the possiblity to lower the obesity numbers in america, and lower amounts of diabetes.</p>
    		<p class="content-text">Exercise can help prevent excess weight gain or help maintain weight loss. When you engage in physical activity, you burn calories. The more intense the activity, the more calories you burn. You don't need to set aside large chunks of time for exercise to reap weight-loss benefits. If you can't do an actual workout, get more active throughout the day in simple ways — by taking the stairs instead of the elevator or revving up your household chores.</p>
    	</div>
    	
    
        <!-- jQuery -->
        <script src="js/jquery.js"></script>
    
        <!-- Bootstrap Core JavaScript -->
        <script src="js/bootstrap.min.js"></script>
    
        <!-- Plugin JavaScript -->
        <script src="js/jquery.easing.min.js"></script>
    
        <!-- Google Maps API Key - Use your own API key to enable the map feature. More information on the Google Maps API can be found at https://developers.google.com/maps/ -->
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCRngKslUGJTlibkQ3FkfTxj3Xss1UlZDA&sensor=false"></script>
    
        <!-- Custom Theme JavaScript -->
        <script src="js/main.js"></script>
    
    </body>
    
    </html>

Answer 1

您的 .content-text 段落有底部边距。从最后一个中删除它:

p.content-text:last-child {
    margin-bottom:0;
}