바닥 글 ~ 위치 지정 // 꼬임이 있음

그래서 모든 내용 아래에 바닥 글이 자동으로 배치되는 '고정 바닥 글'코드를 사용했습니다. 문제는 내 콘텐츠 높이가 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

항목 : 가까운 상기 이미지의 하단에 이미지를 내 자막을 얻을 수있는 방법이 있습니까? –

그래서 바닥 글이 항상 창 하단에 나타나길 원하십니까? – 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

고마워요! 이것은 내 문제를 해결하고 제가 가진 다른 위치 결정 문제를 해결하는 데 도움이되었습니다. –

바닥 글 ~ 위치 지정 // 꼬임이 있음

답변

관련 문제