フッター〜ポジショニング//ツイストで

私は自動的にフッタをコンテンツの下に配置する「固定フッタ」コードを利用しました。問題はコンテンツの高さが1300ピクセルに設定されていることです。高さが1300ピクセルを超えるスクリーンは、画面の下部には表示されず、コンテンツの下に表示されます。フッター〜ポジショニング//ツイストで

は、ここに私のコードです：

@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>

私の言葉遣いが視覚化するために、この問題を困難にしている場合、私はお詫び申し上げます。ご迷惑をおかけして申し訳ございません。

出典

2016-07-05 Anonymous

ALSO：私は近いと画像の下に画像のための私のキャプションを取得するための方法はありますか？ –

したがって、フッターが常にウィンドウの下部に表示されますか？ – matthewelsom

あなたの質問は少し曖昧です - 私はあなたに "私のフッタを内容の下ではなく画面（ウィンドウ）の底に固定するにはどうしたらいいですか？

あなたはそれのために位置を固定することができます。

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>

出典

2016-07-05 02:52:05 matthewelsom

ありがとう！これは私の問題を解決し、私が持っていた他の配置問題を解決するのを助けました。 –

フッター〜ポジショニング//ツイストで

答えて

関連する問題