페이지 또는 화면의 하단에 위치 div

나는 내 웹 페이지의 맨 아래에 배치 된 바닥 글 섹션을 만들었습니다. 내 웹 페이지의 내용이 브라우저 뷰포트의 높이보다 작은 경우 문제가 발생하여 바닥 글과 페이지 끝 사이에 빈 공간이 생깁니다. 이 CSS 조각을 사용하여 문제를 해결하려고했습니다. 페이지 또는 화면의 하단에 위치 div

.footer { 
    position: absolute; 
    bottom: 0; 
    height: 125px; 
}

그것은 약간의 내용이 내 웹 페이지에 완벽하게 작동하지만 큰 웹 페이지를 들면, 바닥 글 내용을 중복했다. 몇 가지 온라인 자습서를 따랐지만 여전히 제대로 만들 수는 없습니다.

<body class="bg-1"> 
<div class="container-full"> 
    <div class="container"> 
     ... 
    </div> 
</div> 

<div class="footer text-center"> 
    ... 
</div> 
</body> 

.container-full { 
    width: 100%; 
    height: 100%; 
    padding-top: 70px; 
    margin: 0 auto 125px; 
} 
.bg-1 { 
    background: url(../img/1.png) no-repeat center center fixed; 
    background-size: cover; 
    height: 100%; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    height: 125px; 
}

트위터 부트 스트랩을 사용하고 있습니다.

출처

2016-07-22 Jeremy

변화 : –

고정하는 마진 탑을 추가 : 125px; 너비 div의 높이 여백 –

@NagaSaiA 나는 끈적 거리고 싶지 않다. – Jeremy

당신은 방법에 따라 시도 할 수 있습니다 : 위치

html, 
 
body { 
 
    height: 100%; 
 
} 
 
.container-full { 
 
    table-layout: fixed; 
 
    background: #ccc; 
 
    display: table; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
.footer { 
 
    display: table-footer-group; 
 
    background: #2f2f2f; 
 
    overflow: hidden; 
 
    color: #fff; 
 
    width: 100%; 
 
    height: 1%; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<body class="bg-1"> 
 
    <div class="container-full"> 
 
    <div class="container"> 
 
     <p>Main Content goes here</p> 
 
    </div> 
 
    <div class="footer text-center"> 
 
     <p>Footer text goes here..</p> 
 
    </div> 
 
    </div> 
 
</body>

출처

2016-07-22 05:26:18

감사합니다. 그것은 완벽하게 작동합니다. 'height : 1 %'이하는 일을 제게 설명해 주시겠습니까? – Jeremy

@Jeremy이 메소드의 올바른 작동을위한'height : 1 %'와'width : 100 %'와 같은 속성은 오래된 파이어 폭스 브라우저입니다. 원하는 경우 무시할 수 있습니다. :) –

height 속성을 제거하면 최신 Firefox 브라우저에서 작동하지 않습니다. – Jeremy

페이지 또는 화면의 하단에 위치 div

답변

관련 문제