Question

我知道这个（或变体）已被问过很多......但我所看到的并不属于我在这里处理的事情。

我的垂直DIV元素之间仍有14px的差距。当我检查页面时，它没有被考虑（没有突出显示）。它从一个div（底部没有边距或填充）到下一个（顶部没有边距或填充）。

到目前为止，我提出的唯一解决方案是将较低DIV的边距设置为-14px，但我觉得这应该是必要的。

另外，我的FOOTER漂浮在屏幕中间！

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Title</title>
</head>
<body>
    <header>
        <!-- navigation -->
    </header>
    <main>

        <div class="banner">
            <div>
                <h3>Some text</h3>
                <p>
                    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, eius.
                </p>
            </div>
        </div>
        <div class="services-section">
            <p>
                These are services
            </p>
        </div>
        <div class="contact-section">
            <p>
                This is content
            </p>
        </div>
    </main>
    <footer>
        <ul>
            <li>something
            <li>something else
        </ul>
    </footer>
</body>
</html>

和css

html,body,main
{
    height: 100%;

}

footer
{
    background-color: #000;
    color: white;
    min-height: 120px;
    width: 100%;
}

.banner
{
    background: url('/img/laptop.jpg') no-repeat center fixed;
    background-size: cover;
    color: white;
    height: 100%;
    text-align: center;
}

.banner div
{
    /* padding-top: 200px;*/
    position: absolute;
    top: 40%;
    width: 100%;
}

.banner div h3
{
    font-size: 36px;
    text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.9);
}

.banner div p
{
    font-size: 18px;

}

.services-section
{
    background-color: #eee;
    min-height: 520px;
    margin: 0;
    padding: 0;
}

.contact-section
{
    background-color: #1C74BB;
    min-height: 400px;
    margin: 0;
    padding: 0;
}

fiddlen https://jsfiddle.net/1vLzvb0k/9/

感谢

Answer 1

尝试

.banner div
        {
            /* padding-top: 200px;*/
            position: absolute;
            top: 40%;
            width: 100%;
        }

到

div.banner
        {
            /* padding-top: 200px;*/
            position: absolute;
            top: 40%;
            width: 100%;
        }

并且您想在顶部设置横幅，移除position:absolute;

Answer 2

此空间来自p标记。在样式表中添加margin:0

p{
    margin:0
}

html,body,main {
     height: 100%;
}
footer {
     background-color: #000;
     color: white;
     min-height: 120px;
     width: 100%;
}
 .banner {
     background: url('/img/laptop.jpg') no-repeat center fixed;
     background-size: cover;
     color: white;
     height: 100%;
     text-align: center;
}
 .banner div {
    /* padding-top: 200px;
    */
     position: absolute;
     top: 40%;
     width: 100%;
}
 .banner div h3 {
     font-size: 36px;
     text-shadow: 0em 0.1em 0.1em rgba(0, 0, 0, 0.9);
}
 .banner div p {
     font-size: 18px;
}
 .services-section {
     background-color: #eee;
     min-height: 520px;
     margin: 0;
     padding: 
}
 .contact-section {
     background-color: #1C74BB;
     min-height: 400px;
}
 p{
     margin:0 
}

<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <title>Title</title>
   </head>
   <body>
      <header>
         <!-- navigation -->
      </header>
      <main>
         <div class="banner">
            <div>
               <h3>Some text</h3>
               <p>
                  Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reiciendis, eius.
               </p>
            </div>
         </div>
         <div class="services-section">
            <p>
               These are services
            </p>
         </div>
         <div class="contact-section">
            <p>
               This is content
            </p>
         </div>
      </main>
      <footer>
         <ul>
            <li>something
            <li>something else
         </ul>
      </footer>
   </body>
</html>

DIV和浮动FOOTER之间的差距

2 个答案: