0
Привет, дружище штабелеров,Стоп сноску делений от прикрываясь содержимого 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-->
Переместить футер в отдельный DIV, который начинается после того, как все остальные концов контента. – TylerH
Я пробовал это, но он все еще скрывается за контентом. Просто обратите внимание на нижний колонтитул в верхней части изображения. –
Похоже, вы попали в хвостовой охотник со всеми высотами и отрицательными вертикальными смещениями. Что вы пытались преодолеть? Когда я удаляю большинство из них в firebug, а затем добавляю 'overflow: hidden' в' div.My-Gems', нижний колонтитул снизу вверх. – Will