Footer ~ Positionierung // Mit einem Twist

Also habe ich den "Sticky Footer" -Code verwendet, der die Fußzeile automatisch unter den gesamten Inhalt stellt, mein Problem ist, dass meine Inhaltshöhe auf 1300 Pixel eingestellt ist, was bedeutet, wenn Sie haben Bei einem Bildschirm mit einer Höhe von mehr als 1300 Pixel erscheint die Fußzeile nicht am unteren Bildschirmrand, sondern unterhalb des Inhalts.Footer ~ Positionierung // Mit einem Twist

Hier ist mein Code:

@import 'https://fonts.googleapis.com/css?family=PT+Mono'; 
 

 

 
body { 
 
    font-family: 'PT Mono', monospace; 
 
    background: linear-gradient(to bottom, #1D4350 , #A43931); 
 
    background-attachment: scroll; 
 
} 
 
#content { 
 
    height: 1300px; 
 
    width: 100%; 
 
} 
 
html, #wrapper { 
 
    max-width: 100%; 
 
    min-height: 100%; 
 
    min-width: 960px; 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 
#wrapper { 
 
    position: relative; 
 
} 
 
.Octagon { 
 
    color: #2aa186; 
 
    text-align: center; 
 
    line-height: 30%; 
 
    margin-top: 25px; 
 
} 
 
.LT { 
 
    text-align: center; 
 
    color: #3a5454; 
 
    line-height: 0%; 
 
    font-style: italic; 
 
} 
 
.boi { 
 
    cursor: pointer; 
 
    margin-right: 30px; 
 
    padding: 8px 18px; 
 
    border: 1px solid #204156; 
 
    border-color: #52AEC9; 
 
    color: #52AEC9; 
 
    position: absolute; 
 
    top: 8px; 
 
    right: 16px; 
 
} 
 
.boi:active { 
 
    top: 2px; 
 
} 
 
.iob { 
 
    cursor: pointer; 
 
    margin-left: 30px; 
 
    padding: 8px 18px; 
 
    border: 1px solid #204156; 
 
    border-color: #52AEC9; 
 
    color: #52AEC9; 
 
    position: absolute; 
 
    top: 8px; 
 
} 
 
#verr { 
 
    
 
} 
 
.boi:active, 
 
.iob:active { 
 
    top: 2px; 
 
} 
 
#manyarms { 
 
    position: absolute; 
 
    margin-top: 30px; 
 
    margin-left: 31px; 
 
} 
 
#sensible { 
 
    position: absolute; 
 
    margin-top: 30px; 
 
    margin-right: 31px; 
 
    right: 10px; 
 
} 
 
.boi:hover, 
 
.iob:hover { 
 
    text-shadow: 0 0 10px #a193ff; 
 
} 
 
#footer { 
 
    text-align: right; 
 
    margin-right: 10px; 
 
}

<html> 
 
<head> 
 
     <title>The Pragmatic Octopus</title> 
 
     <meta charset="utf-8"/> 
 
    \t <link rel='stylesheet' href='style.css'/> 
 
\t  <script src='script.js'></script> 
 
</head> 
 
<body> 
 
<div id="wrapper"> 
 
<div id="header"> 
 
\t  <h1 class="Octagon">The Pragmatic Octopus</h1> 
 
\t  <p class="LT">Lee Townsend</p> 
 
     <a href="www.google.com"> 
 
\t  <p class="boi">Contact</p> 
 
     </a> 
 
     <a href="www.google.com"> 
 
    \t <p class="iob">Information</p> 
 
     </a> 
 
</div> 
 
<div id="content"> 
 
    <div id="manyarms"> 
 
     <img src="https://s32.postimg.org/406x38nlh/imageedit_1_3827627792  .jpg" alt="mmm~" style="width:310px; height:250px;"> 
 
     <p style="color: #6458b7;" id="verr">Here comes a very special boi!</p> 
 
    </div> 
 
    <div id="sensible"> 
 
     <img src="http://www.wonderslist.com/wp-content/uploads/2014/07/Blue-ringed-octopus.jpg" alt="~mmm" style="width:310px; height:250px;"> 
 
     <p style="color:#6458b7;">He loves to pose for photos!</p> 
 
    </div> 
 
</div> 
 
</div> 
 
     <div id="footer"> 
 
     &copy; Hecc 
 
     </div> 
 
</body> 
 
</html>

ich entschuldige mich, wenn meine Formulierung dieses Problem schwierig macht, zu visualisieren. Jede Hilfe wird sehr geschätzt!

Quelle

2016-07-05 Anonymous

AUCH: Gibt es für mich eine Möglichkeit, meine Titel für das Bild näher des Bildes auf den Boden zu bekommen? –

Also möchten Sie Ihre Fußzeile immer am unteren Rand des Fensters erscheinen? – matthewelsom

Ihre Frage ist ein wenig mehrdeutig - ich denke, Sie fragen "Wie repariere ich meine Fußzeile an den unteren Rand des Bildschirms (Fenster), nicht unter dem Inhalt?".

Sie können dafür eine feste Position verwenden.

article { 
 
    height: 1300px; 
 
} 
 
footer { 
 
    position: fixed; 
 
    width: 100%; 
 
    left: 0; 
 
    bottom: 0; 
 
    background: lightpink; 
 
    padding: 0 1rem; 
 
}

<body> 
 
    <article> 
 
    <p>This is the page content</p> 
 
    </article> 
 
    <footer> 
 
    <p>I am a fixed footer</p> 
 
    </footer> 
 
</body>

Quelle

2016-07-05 02:52:05 matthewelsom

Danke! Dies löste mein Problem und half mir, andere Positionierungsprobleme zu lösen, die ich hatte. –

Footer ~ Positionierung // Mit einem Twist

Antwort

Verwandte Themen