Question

我正在重新创建Google主页的外观，并且我注意到身体底部下面有一个很大的空白区域。此外，页面＆＃34; height＆＃34;比你预期的要长，因为你需要向下滚动才能查看空间。

这对我来说是令人惊讶的，因为身体主要由两个设置在95%和5% height的div组成，所以我认为这只会完美地填充窗框。使用镀铬工具进行检查并不能显示任何元素的空间占用了这个额外的空间。我附上了截图，这是代码。

body {
    background-color: white;
    margin:0;
}
body, html{
    height: 100%;
}

.imageTag{
    display: inline-block;
    vertical-align: bottom; 
}

.topItem{
    font-family: arial,sans-serif;
    font-size: 13px;

    margin-right: 25;
    margin-top: 13;

    opacity: .75;
}

.topItem:hover {
    text-decoration: underline;
    cursor:pointer;
}

.signIn{
    border:7px solid #419bf4;
    border-right: 12px solid #419bf4;
    border-left: 12px solid #419bf4;
    border-radius: 3px;

    background-color: #419bf4;

    color: white;
    font-size: 12px;
    font-weight: 600;

    margin-top: 8;

    opacity: 1;
}

.signIn:hover{
    cursor:pointer;

    text-decoration: none;

    background-color: #4486f7;
    border-color: #4486f7;
}

.squaresImg{
    margin-top: 8;
    margin-left: 1;
}

.squaresImg:hover{
    cursor:pointer;
}

.googleImg{
    margin-top:5;
    margin-bottom:30;
}

.searchBar{
    width:550px;
    height:45px;

    font-family: arial,sans-serif;
    font-size:18px;

    background-image:url(googleMic.png);
    background-repeat: no-repeat;
    background-position: 515px 10px; 
    background-size: 3%;

    border: 1px solid;
    border-color: #dfdada;

    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.19);

    outline: none;

}

.searchBar:hover{
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 7px 7px 0 rgba(0, 0, 0, 0.19);

}

.barItem{
    margin-right: 2;
    margin-left: 2;

    border:1px solid #eeeeee;
    padding: 9px;
    border-radius: 3px;

    background-color: #eeeeee;

    font-family: arial,sans-serif;
    font-size: 13px;
    color: #646464;
    font-weight: 600;

    opacity: .75;
}

.barItem:hover{

    border-color: #646464;
    color: #000000;
}   

.bottomDiv{
    width: 100%;
    /*height: 5%;*/

    background-color: #eeeeee;

    border: 1px solid;
    border-color: #e4e4e4;

}

.bottomItemL{
    float: left;

    margin: 10px 15px 0;

    font-family: arial,sans-serif;
    font-size: 13px;
    color: #666;
}
.bottomItemR{
    float: right;

    margin: 10px 15px 0;

    font-family: arial,sans-serif;
    font-size: 13px;
    color: #666;
}

.bottomItemL:hover {
    text-decoration: underline;
    cursor:pointer;
}

.bottomItemR:hover {
    text-decoration: underline;
    cursor:pointer;
}

 <html>
<head>
  <meta charset="UTF-8">
  <title>Google Page</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div style="height: 95%">
        <div style="height: 35%">
            <span class="topItem signin" style="float: right;":>
                Sign In
            </span>
            <span style="width: 4%; height: 50%; float: right;":>
                <img class="squaresImg" src="squares.png" alt="squares">
            </span>
            <span class="topItem" style="float: right;":>
                Images
            </span>
            <span class="topItem" style="float: right;":>
                Gmail
            </span>
        </div>
        <center>        
            <img class="googleImg" src="googleLogo.png" alt="google logo">
            <div style="margin-bottom: 35">
                <input class="searchBar" type="text" name="searchBar" autofocus="autofocus">
            </div>
            <div style="height: 40%">
                <span class="barItem">Google Search</span>
                <span class="barItem">I'm Feeling Lucky</span>
            </div>              
        </center>
    </div>
    <div style="height: 5%" class="bottomDiv">
        <span class="bottomItemL" >Advertising</span>
        <span class="bottomItemL" >Business</span>
        <span class="bottomItemL" >About</span>
        <span class="bottomItemR" >Settings</span>
        <span class="bottomItemR" >Terms</span>
        <span class="bottomItemR" >Privacy</span>
    </div>
</body>
</html>

Answer 1

您需要先定义父元素的高度，即 body 标记。将其写在<style>代码中：

body, html{
height: 100%;
}
body{
margin: 0
}

编辑：当我检查你的代码时，我没有看到任何类似的空间。它完全100％占用。我看到了一个水平卷轴。你可以删除它。您已向width: 100%提供bottomDiv，这会导致水平滚动。只需删除它，就没有必要了。

从HTML页面底部删除空格

1 个答案: