Question

我有一个很大的白色间距，将我的最后一个div放到页面底部。我不想显然扩展页面，这正是我正在构建的（www.theoriginalbeng.com）。间距发生在div：bulky和div：4 Balls

之间

我的HTML是：

<!DOCTYPE html>
<html>

<head>
    <link href="main.css" rel="stylesheet">
    <title> TJ Sports </title>
</head>     

<body>
    <div class="content">

        <div class = "title">
            <div class="container">
            <a href = "http://www.theoriginalbeng.com"> TOEJAM SPORTS </a>  
            <p>Be The Best: On and Off the Field</p>
            </div>
        </div>


        <div class="nav">
                <div class="container">
                    <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Search</a></li>
                </ul>
            </div>
        </div>


        <div class="bulky">
            <div class="Container">

                    <p>Give it some sort of inspiring text to make a purchase here</p>

                        <a href="#" class="button">Buy</a>
                        <a href="#" class="button">Sell</a>

            </div>
        </div>

        <div class="4 Balls">
            <div class="Container">
            <img src="/Balls/Baseball.jpeg">
            <img src="/Balls/basketball.jpeg">
            <img src="/Balls/americanFootball.jpeg">
            <img src="/Balls/Puck.jpeg">
            </div>
        </div>

        <div class="footer">
            Copyright © theoriginalbeng.com
        </div>

    </div>
</body>
</html>

我的CSS是：

.content { 
    width: 80%;
    margin: 0 auto;
}

.title {
    text-align: center;
    font-weight: bold;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 10px;
    padding-right: 10px;
    text-transform: uppercase;
    background-image: url('http://www.fantasyspecialist.com/wp-content/uploads/2010/05/fantasy-football-email.jpg');
    background-size: 100% auto;

}

.title a {
    color: #3399ff;
    font-size: 100px;
    text-decoration: none;
}


.nav ul {
    list-style-type: none; /* Removes bullet Points */
    margin: 0; /*this and padding below even up everything and moves away from default settings. Somestimes no difference is noticed*/
    padding: 0; /*this and margin above even up everything*/
    overflow: hidden; /*this hides the rectangle box. Everything in css or html comes in a rectangular box */
    background-color: #333;
}

.nav ul li {
    float: left; /*This puts all ul li items in a line */
}

.nav ul li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}


.bulky {
    background-image: url('Sidelines.jpeg');
    background-size: 100% auto;
    height: 6000px; /* stretches image downwards*/
    background-repeat: no-repeat;
    /*padding-top: 14px; */ /* All paddings add to point that there will be no white spacing between this image and the nav bar */
    /*padding-bottom: 14px;*/
    /*padding-left: 10px;*/
    /*padding-right: 10px;*/
    /*margin:0; */
    /*padding:0;*/
    color: white;

}

.bulky ul li {
    float: left; /*This puts all ul li items in a line */
    margin: 0; /*this and padding below even up everything and moves away from default settings. Somestimes no difference is noticed*/
    padding: 14px 16px; /*this and margin above even up everything*/
    overflow: hidden; /*this hides the rectangle box. Everything in css or html comes in a rectangular box */

}

.button {
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}

.button:hover {
    background-color:#5cbf2a;
}
.button:active {
    position:relative;
    top:1px;
}

.4 Balls {
    float: right;
}

.footer {
    background-color:black;
    color:white;
    clear:both;
    text-align:center;
    padding:5px; 
}

任何帮助都会很棒

Answer 1

导致“问题”的高度是多少？＆＃39;在你的CSS中陈述了庞大的类。您将高度设置为6000px。

Answer 2

css类名称中没有空格。 4球无效。请尝试使用FourBalls

我最后两个div之间的空白区域

2 个答案: