html - 阻止页脚 div 隐藏在内容 div 后面

Question

大家好，各位堆垛机，

我试图在我的票的底部放置一个页脚，但是放置在页脚上方的图像 div 隐藏了页脚 div。我怎样才能让它出现？

我在下面附上了相关代码，或者您可以查看 JSFiddle .预先感谢您的帮助。

.goodbye {
    display:block;
}

@charset"UTF-8";
.Second-Header, .row, sub, sup {
    position:relative
}

.contact ul, ul, ul.proficient {
    list-style-type:none
}
.menubutton, html {
    -webkit-text-size-adjust:100%
}
 .menubutton, .row {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none
}

body{
    margin:0;
    padding:0;
    border:0
}

html {
    height:100%;
    -ms-text-size-adjust:100%
}
body {
    min-height:100%
}button, html input[type=button], input[type=reset], input[type=submit] {
    cursor:pointer;
    -webkit-appearance:button
}
input[type=radio], input[type=checkbox] {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box
}
textarea {
    overflow:auto
}
::selection {
    background:#e94378;
    color:#fff
}
::-moz-selection {
    background:#e94378;
    color:#fff
}
img::selection {
    background:0 0
}
img::-moz-selection {
    background:0 0
}
@media screen and (max-width:1px) {
    body {
        font-size:(@font-size + 2)/16*1em
    }
}
html body {
    width:100%;
    background-color:#50b796;
    height:100%
}
body {
    -webkit-tap-highlight-color:rgba(255, 0, 0, .62);
    font:100%/1.5 serif
}
@media (min-width:600px) {
    body {
        font:112.5%
    }
}
::-webkit-scrollbar, ::-webkit-scrollbar-thumb {
    width:7px;
    height:7px;
    border-radius:4px
}
::-webkit-scrollbar, ::-webkit-scrollbar-track-piece {
    background:#fff
}
::-webkit-scrollbar-thumb {
    background:#232323
}
::-webkit-scrollbar-button {
    display:none
}
.row {
    display:block;
    margin-bottom:1em;
    margin-top:5em;
    color:#000
}
.Second-Header {
    display:block;
    margin-bottom:5em;
    margin-top:4em;
    color:#fff
}
.Second-Header h2 {
    font-family:'Abril Fatface', cursive;
    font-size:2.5em;
    font-weight:400;
    color:fff
}
body, h1, h2, h3, h4, h5, h6 {
    font-size:1rem;
    font-weight:500;
    font-family:brandon-grotesque, brandon-grotesque, Futura, sans-serif
}
@media (max-width:888px) {
    .row {
        margin:3em 0 0
    }
}
@media (max-width:666px) {
    .row h2 {
        margin-top:1.5em
    }
}
@media (max-width:555px) {
    .row h2 {
        margin-top:1em
    }
}
.row h2 {
    font-family:'Abril Fatface', cursive;
    font-size:2.5em;
    font-weight:400;
    color:#000
}
@media (max-width:777px) {
    .row h2 {
        font-size:2em
    }
}
@media (max-width:666px) {
    .row h2 {
        font-size:1.8em
    }
}
@media (max-width:555px) {
    .row h2 {
        font-size:1.5em
    }
}
@media (max-width:444px) {
    .row h2 {
        margin-top:0;
        margin-bottom:0;
        font-size:1.3em
    }
}
@media (max-width:333px) {
    .row h2 {
        font-size:1.2em
    }
}
@media (max-width:222px) {
    .row h2 {
        font-size:1em
    }
}
.row h2 span:after {
    content:'The Man'
}
h1 {
    font-size:2.5em
}
h2 {
    font-size:1.875em
}
p {
    font-size:.875em
}
.My-Gems {
    width:100%;
    margin-top:-360px
}
@media screen and (max-width:444px) {
    .My-Gems {
        width:100%
    }
}
@media screen and (max-width:333px) {
    .My-Gems {
        width:100%
    }
}
.global-container {
    width:100%;
    position:relative;
    background-color:#fff
}
.content-container, .post-container {
    text-align:center;
    padding:0;
    width:100%;
    background-color:#50b796;
    height:100%;
    margin:0;
    position:relative
}
.content-container {
    min-height:600px;
    max-width:1359px
}
.post-container {
    z-index:0;
    top:400px;
    max-height:100%
}
.Well-Aligned {
    position:absolute;
    left:0;
    top:-280px;
    width:100%;
    height:600px;
    background-color:#fff;
    z-index:0;
    -webkit-transform:skewY(5deg);
    -moz-transform:skewY(5deg);
    -ms-transform:skewY(5deg);
    -o-transform:skewY(5deg);
    transform:skewY(5deg)
}
@media (max-width:999px) {
    .Well-Aligned {
        height:560px
    }
}
@media (max-width:777px) {
    .Well-Aligned {
        height:520px
    }
}
@media (max-width:666px) {
    .Well-Aligned {
        height:470px
    }
}
@media (max-width:555px) {
    .Well-Aligned {
        height:420px
    }
}
@media (max-width:333px) {
    .Well-Aligned {
        height:380px
    }
}
.Biographical-Content {
    z-index:99999;
    display:block;
    top:-350px;
    position:relative;
    -moz-transition:all .3s ease-out;
    -o-transition:all .3s ease-out;
    -webkit-transition:all .3s ease-out;
    transition:all .3s ease-out;
    font-family:brandon-grotesque, brandon-grotesque, Futura, sans-serif;
    width:65%;
    margin-left:auto;
    text-align:center;
    padding:0;
    margin-right:auto
}
@media (max-width:444px) {
    .Biographical-Content {
        top:-365px
    }
}
@media (max-width:333px) {
    .Biographical-Content {
        top:-375px
    }
}
.Biographical-Content p {
    margin-top:20px;
    padding:0;
    transition:all .3s ease-out;
    font-size:20px;
    line-height:2em
}
.Biographical-Content a, .Biographical-Content p {
    color:#fff;
    font-family:brandon-grotesque, brandon-grotesque, Futura, sans-serif;
    -moz-transition:all .3s ease-out;
    -o-transition:all .3s ease-out;
    -webkit-transition:all .3s ease-out
}
@media (max-width:1111px) {
    .Biographical-Content {
        width:70%
    }
    .Biographical-Content p {
        font-size:18px;
        line-height:1.8em
    }
}
@media (max-width:999px) {
    .Biographical-Content {
        width:75%
    }
    .Biographical-Content p {
        font-size:16px;
        line-height:1.6em
    }
}
@media (max-width:555px) {
    .Biographical-Content p {
        font-size:14px;
        line-height:1.4em
    }
    .Biographical-Content {
        width:80%
    }
}
@media (max-width:444px) {
    .Biographical-Content p {
        font-size:12px;
        line-height:1.4em
    }
    .Biographical-Content {
        width:85%
    }
}

.Biographical-Content a {
    cursor:pointer;
    border-bottom:2px solid #fff;
    transition:all .3s ease-out
}
.Biographical-Content a:hover {
    background-color:#e94378;
    color:#fff;
    transition:all .3s ease-out
}
.Biographical-Content a:hover, .item {
    -moz-transition:all .3s ease-out;
    -o-transition:all .3s ease-out`;
    -webkit-transition:all .3s ease-out
}
.Intro-Video, .step {
    overflow:hidden;
    position:relative;
    background-color:#fff
}
.step {
    width:75%;
    -webkit-background-size:cover;
    z-index:999999999999999;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover;
    background-image:url(http://kadeem.london/Image/Kadeem-Laurie-Lisbon-min.jpg);
    margin:0 auto;
    text-align:center;
    background-repeat:no-repeat
}
.step:nth-child(odd) {
    -ms-transform-origin:top left;
    -webkit-transform-origin:top left;
    transform-origin:top left
}
.step:nth-child(even) {
    -ms-transform-origin:top right;
    -webkit-transform-origin:top right;
    transform-origin:top right
}
.step.out-view:nth-child(odd) {
    -ms-transform-origin:top left;
    -webkit-transform-origin:top left;
    transform-origin:top left;
    -moz-transform:rotate(5deg);
    -ms-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
    transform:rotate(5deg)
}
.step.out-view:nth-child(even) {
    -ms-transform-origin:top right;
    -webkit-transform-origin:top right;
    transform-origin:top right;
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg)
}
.Kadeem-Logo {
    position:relative;
    top:0;
    width:100%;
    display:block
}
.Kadeem-Logo img {
    display:block;
    width:auto;
    max-width:100%
}
.Intro-Video {
    z-index:9999;
    width:100%;
    display:block
}
.video-box {
    height:100%;
    width:100%;
    position:relative
}
#video-container {
    height:100%;
    width:100%;
    overflow:hidden
}
@media (max-width:600px) {
    .Intro-Video {
        background-image:url(http://kadeem.london/Image/kadeem-bg-min.jpg);
        width:100%;
        background-size:cover
    }
    .video-box {
        visibility:hidden
    }
    #video-container {
        visibility:visible
    }
}
.hide, .overlay-hugeinc {
    visibility:hidden
}
video {
    position:absolute;
    z-index:0;
    background:url(http://kadeem.london/Image/kadeem-bg.jpg) no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:cover
}
video.fillWidth {
    width:100%
}
@media (max-width:600px) {
    video {
        visibility:hidden
    }
}
.item {
    text-align:center;
    transition:all .3s ease-out;
    float:left;
    position:relative;
    width:50%;
    height:100%
}
.item-hover, .item-hover .mask, .item-img, .item-info {
    width:100%;
    height:100%
}
.item-hover, .item-hover .mask {
    position:absolute;
    top:0;
    height:100%;
    left:0
}
.item-type-double .item-hover {
    z-index:5;
    -webkit-transition:all 300ms ease-out;
    -moz-transition:all 300ms ease-out;
    -o-transition:all 300ms ease-out;
    transition:all 300ms ease-out;
    opacity:0;
    cursor:pointer;
    display:block;
    text-align:center
}
.item-type-double .item-info {
    color:#fff;
    display:table;
    position:relative;
    z-index:5
}

.item-type-double .item-info div.mycell {
    vertical-align:middle;
    height:100%;
    display:table-cell
}
.item-type-double .item-info .headline {
    font-size:2.4em;
    font-family:'Proxima Nova' sans-serif;
    text-transform:uppercase;
    width:90%;
    margin:0 auto
}
@media (max-width:500px) {
    .item {
        width:100%;
        height:100%
    }
}
@media (max-width:888px) {
    .item-type-double .item-info .headline {
        font-size:1.8em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
@media (max-width:666px) {
    .item-type-double .item-info .headline {
        font-size:1.4em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
@media (max-width:444px) {
    .item-type-double .item-info .headline {
        font-size:1.3em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
@media (max-width:390px) {
    .item-type-double .item-info .headline {
        font-size:.8em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
@media (max-width:333px) {
    .item-type-double .item-info .headline {
        font-size:.6em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
@media (max-width:222px) {
    .item-type-double .item-info .headline {
        font-size:.5em;
        text-transform:uppercase;
        width:90%;
        margin:0 auto
    }
}
.item-type-double .item-info .date {
    font-size:20px;
    font-family:Canter;
    text-transform:uppercase
}

@media (max-width:444px) {
    .item-type-double .item-info .date {
        font-size:16px;
        text-transform:uppercase
    }
}
@media (max-width:333px) {
    .item-type-double .item-info .date {
        font-size:10px;
        text-transform:uppercase
    }
}
.item-type-double .item-hover .mask {
    background-color:#000;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    opacity:.5;
    z-index:0
}
.item-type-double .item-hover:hover .line {
    width:90%
}
.item-type-double .item-hover:hover {
    opacity:1
}
.item-img {
    width:100%;
    z-index:0
}
.item-img img {
    width:100%;
    display:block
}

.hidden {
    opacity:0
}
.visible {
    opacity:1
}

.fixed-Me {
    float:right;
    position:fixed;
    bottom:-17px;
    left:10%;
    background-size:cover;
    z-index:999999999999999999;
    height:50%;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover
}
@media(max-width:550px) {
    .fixed-Me {
        visibility:hidden
    }
}
.menubutton {
    position:fixed;
    top:15px;
    right:20px;
    z-index:9999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
    width:140px;
    height:40px;
    user-select:none;
    color:#1a1a1a;
    cursor:pointer;
    -webkit-font-smoothing:antialiased;
    -webkit-transition:opacity .35s;
    transition:opacity .35s
}
@media (max-width:1090px) {
    .menubutton {
        width:90px
    }
}
h3 {
    margin:0
}

<div class=global-container>
    <div class=Intro-Video>
        <div class=video-box>
            <div id=video-container>
                <video autoplay class=fillWidth>
                    <source src=Video/Trailer.mp4 type="video/mp4" />
                </video>
                <div class=Kadeem-Logo>
                    <img src=http://kadeem.london/Image/Kl_Wall-min.png alt=Kadeem-Laurie-Logo title="Kadeem Logo">
                </div>
            </div>
            <!-- Video Container -->
        </div>
        <!-- Video Box-->
    </div>
    <!-- Intro Video -->
    <div class=content-container>
        <div class=post-container>
            <div class=Biographical-Content>
                <div class="step out-view"></div>
                <!--Image-->
                <p>I go by the name of Kadeem Laurie and this is my brief portfolio. I am an events graduate currently developing an events marketing start-up. This website, which is responsive, was created from scratch using HTML, CSS and jQuery for the purpose of showcasing some of my digital proficiencies. I specialise in event management, digital content, SEO, marketing strategy, branding and front-end web design.</p>
                <p>Freedom of thought inspires me. I love conceptualising and seeing ideas evolve. I see myself as a marketeer who simply likes to make things look good, branding has thus always been my most favourable aspect of marketing. I studied event management in university and have organised a <a href=events.html> few events</a> of my own. I hope to integrate events within marketing strategy more. I like to ask the <a href="http://stackoverflow.com/users/1923610/kadeem-laurie?tab=profile" target=_blank>right questions</a> and find solutions from different perspectives.</p>
                <p>My favourite book is <a href=https://en.wikipedia.org/wiki/The_Prince>The Prince</a> by Nicolo Machievelli. My favourite dish is <a href=http://lifestyle.sapo.pt/sabores/receitas/arroz-de-marisco>Arroz De Marisco.</a>

                    <br>This website has been recently created so content is being added concurrently.</p>
            </div>
            <!--Biographical Content-->
            <div class=My-Gems>
                <div class=Second-Header>
                     <h2><hr class=lineout></h2>

                </div>
                <div class="item item-type-double">
                    <div class=item-img>
                        <img src=http://kadeem.london/Image/Money-Matters-Logo.png class=menukadeem title=Piggy-Box-Logo alt="Kadeem-Laurie-Money-Matters-Logo" />
                    </div>
<a class=item-hover href=designs.html>
<div class=item-info>
<div class=mycell>
<div class=headline>Designs</div>
</div>
</div>
<div class=mask></div>
</a>

                </div>
                <div class="item item-type-double">
                    <div class=item-img>
                        <img src=http://kadeem.london/Image/Metaphon-Fitness.jpg alt=Metaphon-Fitness title=Metaphon-Fitness alt=Kadeem-Laurie-Metaphon-Fitness style="width:100%" />
                    </div>
<a class=item-hover href=events.html>
<div class=item-info>
<div class=mycell>
<div class=headline>Events</div>
</div></div>
<div class=mask></div>
</a>

                </div>
            </div>
            <!--My Gems-->
        </div>
        <!--Post Container-->
    </div>
    <!--Content Container-->
    <footer class="goodbye">Hello there</footer>
</div>
<!-- Global Container-->

Answer 1

这里发生了几件事:

首先，您为图像 (.item) 使用了 float ，但没有清除它们。任何时候 float 图像或任何其他对象时，都可以将其从 normal flow 中取出。 .这意味着父容器不知道它们的存在，因此不会为它们腾出空间。

有几种方法可以解决这个问题——称为 clearfix methods .在本例中，我使用了 overflow 属性。将 overflow: auto 添加到父级 .post-container。

.post-container {  overflow: auto;  }

第二个问题是同一个容器 (.post-container) 相对于其正常(静态)位置顶部 400px 的位置。

.post-container { top: 400px; }

这会将容器向下推过页脚元素 400 像素。

为了补偿这种向下移动，页脚元素也需要移动 400 像素。

.goodbye { bottom: -400px; }

因此，通过 clearfix 和一些定位，您的页脚最终位于 .global-container 的底部。

https://jsfiddle.net/xc77ebkz/2/