서버 쪽을 사용하여 페이지 하단에 바닥 글 유지 포함

여러 페이지를 포함하는 사이트를 만들고 있습니다. 나는 각 페이지에 HTML을 포함 할 필요가 없도록 서버 쪽을 사용하여 각 페이지의 머리글과 사이트 내용 표시 줄에 덤프합니다.서버 쪽을 사용하여 페이지 하단에 바닥 글 유지 포함

나는 바닥 글을 포함하고 싶었고 바닥 글을 페이지 맨 아래로 강제하는 방법에 어려움을 겪었으며 스택 오버플로에서 발견 된 많은 제안을 시도했으며 누락되었습니다. 뭔가 다른 것을 시도해야합니다.

도움말 콘텐츠의 높이 (JQuery 아코디언 사용)가 고려되지 않고있는 것처럼 보입니다 ... ... 또는 페이지 하단에 바닥 글을 밀어 넣을 적절한 형식이 없습니다. 화면 대신.

HTML을 복사하지 않고도 각 페이지의 머리글과 바닥 글을 가져오고 싶거나 HTML 및/또는 CSS에서 무언가를 놓치고있는 것일 수 있습니다.

바닥 글 바를 포함하는 샘플 페이지는 here입니다.

이

html { 
    font-size: 62.5%; 
    height: 100%; 
} 

body { 
    background-color: #d2d2d2; 
    font-family: 'Cuprum'; 
    height: 100%; 
} 

.page-content { 
    min-height: 100%; 
    position: relative; 
} 

#footer-container { 
    width: 100%; 
    height: 150px; 
    background-color: #797986; 
    bottom: 0; 
    position: absolute; 
    text-align: center; 
}

출처

2017-05-04 boyle.matt

I가 .page-content에 min-height: 100vh; overflow: auto; padding-bottom: 150px; box-sizing: border-box을 body 및 html에서 height를 제거 적용됩니다 : 위의 페이지에 대한 HTML의

샘플

<body> 

<div class="page-content"> 

<!--#include file="../../../_includes/header.shtml"--> 

<div class="container"> 
    <h2 class="container-header">About Widget</h2> 
    <div> 
     <p class="container-text">The About widget is located in the upper right-hand corner of the application, within the header, as shown below.</p> 
    </div> 
    <div class="widget-header-figure-container"> 
     <figure> 
      <img class="widget-header-figure-image" src="images/about.jpg" alt="AboutWidget"> 
      <figcaption class="figure-caption">About widget highlighted in red</figcaption> 
     </figure> 
    </div> 
    <div> 
     <p class="container-text">The About widget provides a synopsis of the application as well as the layers included within the map. Additional links that may be of interest are also provided.</p> 
     <p class="container-text">Contact information for the <a class="link" href="http://linncounty.org/418/GIS-Division" target="_blank">GIS Division</a> and <a class="link" href="http://linncounty.org/292/Real-Estate-Services" target="_blank">Real Estate Division</a> can be found. The Web AppBuilder Developer Edition version and application build date can be found at the bottom.</p> 
    </div> 

</div> 

<footer> 
<!--#include file="../../../_includes/footer.shtml"--> 
</footer> 

</div> 

</body>

샘플 CSS는 다음과 같습니다 ... 다음과 같습니다 높이를주고, 떠 다니는 탐색을 지우고, 바닥을 채워 바닥 글을 넣을 공간을 만들고, 패딩이 높이를 100vh + 150px까지 늘리지 않도록하십시오. id이 코드에 없으므로 CSS의 footer 선택자를 id 대신 footer으로 변경했습니다.

html { 
 
    font-size: 62.5%; 
 
} 
 

 
body { 
 
    background-color: #d2d2d2; 
 
    font-family: 'Cuprum'; 
 
    margin: 0; 
 
} 
 

 
.page-content { 
 
    min-height: 100vh; 
 
    position: relative; 
 
    overflow: auto; 
 
    padding-bottom: 150px; 
 
    box-sizing: border-box; 
 
} 
 

 
footer { 
 
    width: 100%; 
 
    height: 150px; 
 
    background-color: #797986; 
 
    bottom: 0; 
 
    position: absolute; 
 
    text-align: center; 
 
}

<body> 
 

 
<div class="page-content"> 
 

 
<!--#include file="../../../_includes/header.shtml"--> 
 

 
<div class="container"> 
 
    <h2 class="container-header">About Widget</h2> 
 
    <div> 
 
     <p class="container-text">The About widget is located in the upper right-hand corner of the application, within the header, as shown below.</p> 
 
    </div> 
 
    <div class="widget-header-figure-container"> 
 
     <figure> 
 
      <img class="widget-header-figure-image" src="images/about.jpg" alt="AboutWidget"> 
 
      <figcaption class="figure-caption">About widget highlighted in red</figcaption> 
 
     </figure> 
 
    </div> 
 
    <div> 
 
     <p class="container-text">The About widget provides a synopsis of the application as well as the layers included within the map. Additional links that may be of interest are also provided.</p> 
 
     <p class="container-text">Contact information for the <a class="link" href="http://linncounty.org/418/GIS-Division" target="_blank">GIS Division</a> and <a class="link" href="http://linncounty.org/292/Real-Estate-Services" target="_blank">Real Estate Division</a> can be found. The Web AppBuilder Developer Edition version and application build date can be found at the bottom.</p> 
 
    </div> 
 

 
</div> 
 

 
<footer> 
 
    footer 
 
</footer> 
 

 
</div> 
 

 
</body>

출처

2017-05-04 21:40:07

는 CSS에 대한 변경은 큰 일을 당신이 너무 감사합니다! 저는 HTML과 CSS를 처음 접했을 뿐이며, 가장 중요한 문제는 무엇인지 궁금합니다. –

은'height : 100 %'를'html, body'에 정의하면 실제로 브라우저 뷰포트의 높이가 100 %가됩니다. 일반적으로'html {height : 100 %; }'와'body {min-height : 100 %}'대신'min-height : 100vh'를 사용하는 것이 가장 효과적이라고 생각합니다. 그리고 떠 다니는 사이드 바는 클리어되지 않았기 때문에 부모의 높이는 사이드 바의 높이를 존중하지 않았습니다. 그것에 대해 더 자세히 배우려면 "css clearfix"를보십시오. –

서버 쪽을 사용하여 페이지 하단에 바닥 글 유지 포함

답변

관련 문제