바닥 글을 구현하면 내 페이지의 중간 콘텐츠가 누락됩니다.

내 꼬리를 제외하고 모든 콘텐츠를 래퍼에 포함해야한다는 것을 알고 있습니다. div 푸시, 내 가정, 내 바닥 글 내 페이지의 아래로 푸시합니다. 무슨 일이 일어나고있는가요 푸시가 내 머리글 이외의 나머지 내용을 밀고 있습니다.바닥 글을 구현하면 내 페이지의 중간 콘텐츠가 누락됩니다.

header.php, home.php, styles.css 및 footer.php를 사용하고 있습니다. 저는 웹 사이트 구축에 매우 익숙합니다! 어떤 도움이라도 대단히 감사 할 것입니다.

header.php

<body> 

<div class="wrapper"> 

<div class="container"> 
    <div class="navbar"> 
    <br><a href="index.php"><img src="img/banner.jpg" alt="Macaron" width="400"></a></br> 
     <div class="navbar-inner"> 
       <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </a> 
        <div class="nav-collapse collapse"> 
         <ul class="nav"> 
         <li><a href="imagine.php">Imagine</a></li> 
         <li><a href="recipes.php">Recipes</a></li> 
         <li><a href="shops.php">Shop Locator</a></li> 
         <li><a href="photos.php">Photos</a></li> 
        </ul> 
        </div> 

     </div> 
    </div> 
</div> 
<div class="push"></div> 
</div>  
<div id="middle">

home.php

This is the bulk of my page's content.

footer.php

<div class="footer"> 
     <div class="container"> 
      <p> A macaron fan page by Avery Dao and Diana Nguyen </p> 
     </div> 
    </div>

있는 style.css

 /* styles the sticky footer */ 
html, body 
{ 
    height: 100%; 
} 

.wrapper 
{ 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -70px; /* the bottom margin is the negative value of the footer's height */ 
} 

/* Set the fixed height of the footer here */ 
#footer, #push 
{ 
    clear: both; 
    height: 70px; /* .push must be the same height as .footer */ 
} 

.footer 
{ 
    position:relative; 
    font-size: 10pt; 
    font-family: serif; 
    padding: 10px; 
    color: #999999; 
    background: #ffffff; /* Old browsers */ 
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5)); /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%); /* IE10+ */ 
    background: linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0); /* IE6-9 */ 

}

출처

2012-12-08 Diana

에

* { padding: 0px; margin: 0px; }

를 추가 취득'의 #footer는 #의 push' 모두 바닥 글과 푸시'id'를 사용하고 있지만한다고 가정 귀하의 HTML 코드 쇼 클래스. – JFK

당신은 #footerposition: absolute에를 설정하고이 페이지의 하단에 위치 bottom: 0px;를 추가하는 경우. position: absolute은 너비를 설정하지 않으면 내용의 너비를 설정하므로 넣으려면 width: 100%도 입력하십시오. 이 그것을 도움이

당신은 수평 스크롤이 당신의 CSS에서 CSS 파일

출처

2012-12-08 20:57:54

바닥 글을 구현하면 내 페이지의 중간 콘텐츠가 누락됩니다.

답변

관련 문제