0
Во-первых некоторый фон. Я создал фиксированный нижний колонтитул, который открывается, когда пользователь прокручивается до нижней части страницы, которая работает нормально. Теперь проблема. Когда пользователь прокручивается донизу, они встречаются с пробелом чуть выше нижнего колонтитула, который подсвечивается красным.Кузовное пространство, отображаемое ниже содержания
Я попытался разместить нижний колонтитул выше, чтобы перекрывать пространство, добавляя пиксели в bottom: к тегу .goodbye, но это не помогло. Вот JSFiddle in fullscreen, чтобы дать вам представление о том, о чем я говорю. Обратите внимание на неловкое красное пространство. Как я могу удалить это полностью и реагировать также, так что также нет места, когда размер видового экрана изменяется?
UPDATE:
Вы можете найти код прилагается ниже.
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 [email protected]) [email protected]) /@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-->
Спасибо, я разместил код прямо сейчас. –
У вас так много проблем, что я даже не знаю с чего начать. Ваша разметка HTML неверна. Все идентификаторы и классы (и любые другие атрибуты) должны находиться в '' '' 'quotes. Исправьте эти проблемы, прежде чем отправлять код – feitla
Не то, чтобы это было неправильно, CSS только что был уменьшен, чтобы сделать загрузку сайта быстрее, но очень хорошо. –