페이지의 맨 아래쪽 오버 플로우를 줄이는 방법 CSS/HTML

두 개의 div가 있고 그 중 하나가 두 개의 다른 오버레이 위에 오버레이됩니다. 그래서 하단 divs 나는이 같은 (CSS)를 사용 :페이지의 맨 아래쪽 오버 플로우를 줄이는 방법 CSS/HTML

position:relative; 
top:-200px;

지금은 200 픽셀이 비어있는 페이지의 하단에 남아 있습니다. 오버 플로우를 어떻게 제거합니까? 전체 CSS 코드는 다음과 같습니다

div.headertop 
{ 
    background-image:url('images/bkb.png'); 
    background-repeat:repeat; 
    width: 1000px; 
    height:200px; 
    background-color: black; 
    color:white; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
} 
div.headerbottom 
{ 
    background-image:url('images/bkg.png'); 
    background-repeat:repeat; 
    background-position:bottom; 
    width: 1000px; 
    height:125px; 
    position:relative; 
    margin-left: auto; 
    margin-right: auto; 
} 
div.headerlogo 
{ 
    background-image:url('images/bkw.png'); 
    background-repeat:repeat; 
    width: 800px; 
    height:200px; 
    position:relative; 
    top:-200px; 
    margin-left: auto; 
    margin-right: auto; 
} 
div.content 
{ 
    background-image:url('images/bkg.png'); 
    background-repeat:repeat; 
    background-position:top; 
    width: 1000px; 
    min-height:500px; 
    position:relative; 
    top:-200px; 
    margin-left: auto; 
    margin-right: auto; 
} 
div.footer 
{ 
    background-image:url('images/bkb.png'); 
    background-repeat:repeat; 
    width: 1000px; 
    height:100px; 
    line-height:100px; 
    background-color: black; 
    position:relative; 
    top:-200px; 
    color:white; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    color: white; 
    text-align: center; 
}

HTML 본문 코드 :

<body> 
     <div id="back"> 
      <div class="headertop"> 
       Hello! 
      </div> 
      <div class="headerbottom"> 
      </div> 
      <div class="headerlogo"> 
       <a href="index.html"><img border="0" src="images/logo.png" alt="Future Me - Home"/></a> 
      </div> 
      <div class="content"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing... 
      </div> 
      <div class="footer"> 

      </div> 
     </div> 
    </body>

출처

2013-01-10 Calin Mihalache

샘플 작업 코드를 게시하면 좋을 것입니다. html과 css – Sowmya

본문의 높이를 고정하십시오. –

본문의 높이를 고정하면 @ 페이지가 페이지의 내용에 맞는 높이로 조정되지 못하여 너무 일찍 끊어 질 수 있습니다! – drmonkeyninja

대신 top: -200px를 사용하는 margin-top: -200px를 사용해보십시오.

출처

2013-01-10 11:27:18 drmonkeyninja

drmonkeyninja가 맞습니다! 그러나 margin-top을 .content에만 적용하면 .headerlogo이 표시되지 않습니다. drmonkeyninja에 의해 제안 된 수정 프로그램을 적용 할 때 또한, .footer에서 top을 제거 - (!이 과정의 의도가 아닌 경우) 페이지 하단에 바닥 글을 강제하지 않습니다에 top를 떠나 나는 또한 color: white; 중복되는 것으로 나타났습니다

.footer =)

출처

2013-01-10 11:36:17

페이지의 맨 아래쪽 오버 플로우를 줄이는 방법 CSS/HTML

답변

관련 문제