부트 스트랩이있는 끈적한 바닥 글 - 너비 문제

-1

나는 반응 변수 높이의 고정 풋터를 얻고 자합니다. 다음 페이지 템플릿과 함께 Twitter Bootstrap을 사용하고 있습니다. 끈적한 바닥 글을 CSS에 추가했습니다. 나는 페이지의 높이에 관한 한 원하는 결과를 얻고있다. 그러나 클래스 container-fluid을 사용 함에도 불구하고 페이지의 너비는 줄어 듭니다. 머리글/바닥 글에 동일한 클래스를 추가하려고 시도했습니다. Firebug에서 계산 된 스타일을 검사 할 때 본문, 머리글, 바닥 글, # 래퍼 중 하나에 대해 너비가 설정되어 있는지 확인할 수 없습니다.부트 스트랩이있는 끈적한 바닥 글 - 너비 문제

CSS :

html, body { 
    height: 100%; 
} 

body { 
    display: table; 
} 
header, #wrapper, footer{ 
    display: table-row; 
} 
#wrapper{ 
    height: 100%; 
} 
footer { 
    min-height: 50px; 
}

HTML :

<body> 
<header class="navbar navbar-inverse"> 
    <div class="container-fluid"></div> 
</header> 
<div id="wrapper" class="container-fluid"> 
</div> 
<footer class="navbar navbar-inverse"> 
    <div class="container-fluid"></div> 
</footer>

출처

2016-07-31 bvnbhati

이 시도, 설정 .navbar margin-bottom:0. 이 바닥 글은 높이가 wrapper이거나 콘텐츠가 2 navbar 사이에 있습니다. 페이지 높이가 뷰포트의 높이를 뛰어 넘는 경우

#wrapper{ 
 
    height:500px; 
 
} 
 
.navbar{ 
 
    margin-bottom:0 !important; 
 
}

<head> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<header> 
 
    <nav class ="navbar navbar-inverse"> 
 
    <div class ="container-fluid"></div> 
 
    </nav> 
 
</header> 
 

 
<div id="wrapper"> 
 
    <div class="container-fluid"></div> 
 
</div> 
 

 
<footer> 
 
<nav class ="navbar navbar-inverse"> 
 
    <div class ="container-fluid"></div> 
 
    </nav> 
 
</footer>

출처

2016-07-31 03:52:08 frnt

이 나는 바닥에 고정하지 않습니다. 페이지 높이가 뷰포트 높이보다 작 으면 맨 아래로 밀어야합니다. – bvnbhati

@bvnbhati 왜 당신은 당신 몸 디스플레이 : 테이블을 설정 했습니까? – frnt

높이가 가변적 인 경우 바닥 글을 아래쪽으로 가져 오는 유일한 방법입니다. http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/ – bvnbhati

부트 스트랩이있는 끈적한 바닥 글 - 너비 문제

답변

관련 문제