html - 内容下方出现正文空白

标签 html css

首先是一些背景。我创建了一个固定的页脚，当用户滚动到页面底部时会显示出来，效果很好。现在问题。当用户滚动到底部时，他们会在页脚上方看到一个以红色突出显示的空间。

我试图通过在 bottom: 中向 .goodbye 标记添加像素来将页脚放得更高，以便与空间重叠，但这没有帮助。这是 JSFiddle in fullscreen ，让您了解我在说什么。 注意尴尬的红色空间。我怎样才能完全和响应地删除它，所以在调整视口(viewport)大小时也没有空间？

更新:

请在下面找到代码。

html body {
    width:100%;
    max-height: 400px;
    position: relative;
    background-color:red;
}

.goodbye {
    position: fixed;
    bottom: 0;
    background-color: #f4f4f4;
    z-index: -9;
    width: 100%;
    height: 500px;
    padding: 2rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
}
.goodbye a {
    font-size: 4em;
    font-family:'brandon-grotesque';
}
.text-go {
    color: red;
    background-color: pink;
    height: 80%;
    width: 100%;
}
.social-links {
    background-color: yellow;
    height: 20%;
    widows: 100%;
}
.lineout {
    width: 30%;
    background-image: url(http://kadeem.london/Image/line-out.png);
}
@charset"UTF-8";
 .Second-Header, .row, sub, sup {
    position: relative
}
.Intro-Video, body {
    -webkit-backface-visibility: hidden
}
.byebye {
    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
}
.Biographical-Content a, .contact li, .contact li a, .contact ul, .endh4 a, .footer, .item-type-double .item-hover, .overlay ul li a, .registry-description p a, .registry-description p a:hover {
    text-decoration: none
}
.width (@cols:1) {
    width: (@cols * (@column +@gutter) -@gutter) /@em;
}
article, aside, blockquote, body, dd, div, dl, dt, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, label, legend, li, menu, nav, ol, p, pre, section, td, th, ul {
    margin: 0;
    padding: 0;
    border: 0
}
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, nav, section, video {
    display: block
}
html {
    height: 100%;
    -ms-text-size-adjust: 100%
}
body {
    min-height: 100%
}b, strong {
    font-weight: 700
}
abbr[title] {
    border-bottom: 1px dotted
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
a img, img {
    -ms-interpolation-mode: bicubic;
    border: 0
}
button, input, select, textarea {
    margin: 0;
    font-size: 100%;
    line-height: normal;
    vertical-align: baseline
}
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
    }
}
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: 777px) {
    .Second-Header {
        margin-bottom: 4em;
        margin-top: 3em
    }
    .Second-Header h2 {
        font-size: 2em
    }
}
@media (max-width: 666px) {
    .Second-Header {
        margin-bottom: 3em;
        margin-top: 2em
    }
    .Second-Header h2 {
        font-size: 1.8em
    }
}
@media (max-width: 555px) {
    .Second-Header {
        margin-bottom: 2em;
        margin-top: .5em
    }
    .Second-Header h2 {
        font-size: 1.5em
    }
}
@media (max-width: 444px) {
    .Second-Header h2 {
        font-size: 1.3em
    }
}
@media (max-width: 333px) {
    .Second-Header h2 {
        font-size: 1.2em
    }
}
@media (max-width: 222px) {
    .Second-Header h2 {
        font-size: 1em
    }
}
@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%;
    height: 100%;
    margin-top: -360px;
    overflow: hidden;
}
@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;
}
.high-container {
    width: 100%;
    position: relative;
    background-color: transparent;
    height: 3200px;
}
.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-text {
    color: #f3f3f3;
    font-size: 2em;
}
.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
}
<body>
    <div class="high-container">
        <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://goo.gl/ORijnS>
                        </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-->
                        <br>
                        <p>Hello Stackers</p>
                    </div>
                    <div class=My-Gems>
                        <div class=Second-Header>
                            <h2><img src="http://goo.gl/7O6b6d"/></h2>
                        </div>
                        <div class="item item-type-double">
                            <div class=item-img>
                                <img src=http://goo.gl/mDyMek class=menukadeem title=Piggy-Box-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://goo.gl/C4zMbq alt=Metaphon-Fitness title=Metaphon-Fitness alt=Kadeem-Laurie-Metaphon-Fitness style="width:100%" />
                            </div>
<a class=item-hover href=#>
<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">
                <div class="text-go"><a></a>
                </div>
                <hr>
                <div class="social-links"></div>
            </footer>
        </div>
        <!-- Global Container-->

最佳答案

看起来这个问题很奇怪 box model .幸运的是，它是可以修复的!

一旦你重构你的 CSS 使 .content-container 的内容适合它(你可以通过将鼠标悬停在 chrome 的检查器中的元素上来非常快速和容易地测试)，你可以为 .content-container 添加一个底部边距，这是与页脚高度相同。然后你就可以从 position:fixed 保持你很酷的 scroll-to-reveal 布局，你不需要 .high-container 的固定像素高度(这会导致空白)，因为底部边距将为页脚保留空间。

编辑 - 这是一个 link to a fiddle进行一些快速更改。

这是来自那个 fiddle 的 CSS:

html body {
    width:100%;
    max-height: 400px;
    position: relative;
    background-color:red;
}

.goodbye {
    position: fixed;
    bottom: 0;
    background-color: #f4f4f4;
    z-index: -9;
    width: 100%;
    height: 500px;
    padding: 2rem;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    text-align: center;
}
.goodbye a {
    font-size: 4em;
    font-family:'brandon-grotesque';
}
.text-go {
    color: red;
    background-color: pink;
    height: 80%;
    width: 100%;
}
.social-links {
    background-color: yellow;
    height: 20%;
    widows: 100%;
}
.lineout {
    width: 30%;
    background-image: url(http://kadeem.london/Image/line-out.png);
}
@charset"UTF-8";
 .Second-Header, .row, sub, sup {
    position: relative
}
.Intro-Video, body {
    -webkit-backface-visibility: hidden
}
.byebye {
    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
}
.Biographical-Content a, .contact li, .contact li a, .contact ul, .endh4 a, .footer, .item-type-double .item-hover, .overlay ul li a, .registry-description p a, .registry-description p a:hover {
    text-decoration: none
}
.width (@cols:1) {
    width: (@cols * (@column +@gutter) -@gutter) /@em;
}
article, aside, blockquote, body, dd, div, dl, dt, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, label, legend, li, menu, nav, ol, p, pre, section, td, th, ul {
    margin: 0;
    padding: 0;
    border: 0
}
article, aside, audio, canvas, details, figcaption, figure, footer, header, hgroup, nav, section, video {
    display: block
}
html {
    height: 100%;
    -ms-text-size-adjust: 100%
}
body {
    min-height: 100%
}b, strong {
    font-weight: 700
}
abbr[title] {
    border-bottom: 1px dotted
}
table {
    border-collapse: collapse;
    border-spacing: 0
}
a img, img {
    -ms-interpolation-mode: bicubic;
    border: 0
}
button, input, select, textarea {
    margin: 0;
    font-size: 100%;
    line-height: normal;
    vertical-align: baseline
}
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
    }
}
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: 777px) {
    .Second-Header {
        margin-bottom: 4em;
        margin-top: 3em
    }
    .Second-Header h2 {
        font-size: 2em
    }
}
@media (max-width: 666px) {
    .Second-Header {
        margin-bottom: 3em;
        margin-top: 2em
    }
    .Second-Header h2 {
        font-size: 1.8em
    }
}
@media (max-width: 555px) {
    .Second-Header {
        margin-bottom: 2em;
        margin-top: .5em
    }
    .Second-Header h2 {
        font-size: 1.5em
    }
}
@media (max-width: 444px) {
    .Second-Header h2 {
        font-size: 1.3em
    }
}
@media (max-width: 333px) {
    .Second-Header h2 {
        font-size: 1.2em
    }
}
@media (max-width: 222px) {
    .Second-Header h2 {
        font-size: 1em
    }
}
@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%;
    height: 100%;
    overflow: hidden;
}
@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;
}
.high-container {
    width: 100%;
    position: relative;
    background-color: transparent;
}
.content-container, .post-container {
    text-align: center;
    padding: 0;
    width: 100%;
    background-color: #50b796;
    height: 100%;
    margin: 0;
    position: relative
}
.content-container {
    max-width: 1359px;
    margin-bottom:500px;
}
.post-container {
    z-index: 0;
    max-height: 100%;
    padding-top:3em;
}
.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;
    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
}
.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-text {
    color: #f3f3f3;
    font-size: 2em;
}
.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
}

关于html - 内容下方出现正文空白，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32335983/

上一篇：javascript - 更改 d3 的 GeoPaths MultiPoints 中的符号

下一篇：python - 模糊图像服务器端或使用 CSS

相关文章：

html - 从 css 中删除拼写错误会奇怪地弄乱显示

CSS 仅在检查后工作

html - Wordpress CSS 媒体查询导致子菜单与主菜单一致

html - 如何使 HTML5 <video> 与 CSP (Google Chrome) 兼容？

css - Gulp minify-css 仅用于分发

html - flexslider-右侧留白

javascript - 来自输入的 anchor 链接并提交

css - jquery-mobile 页面中的边距

javascript - js for循环代码在调用前先打印出来

html - css 宽度与高度相同

©2024 IT工具网  联系我们