Firefox에서 패딩 하단이 나타나지 않습니다.

패딩 하단 : 80px를 사용하여 페이지 하단의 높이를 80px로 지정합니다. 이 은 Chrome에서 작동합니다. : 모든 사진은 맨 아래로 스크롤 할 때의 모습입니다. enter image description here Firefox에서 패딩 하단이 나타나지 않습니다.

그러나 파이어 폭스에서 작동하지 않습니다 : enter image description here

아이디어는 당신이 바닥에 도착하면, 바텀 바 (팝업 그냥 디스플레이 지금 숨겨 점이다 : 없음;). 이 조인트 가 크롬에 렌더링 : enter image description here

그러나 파이어 폭스에서 작동하지 않으며, 페이지의 맨 아래 숨길까지 바닥이 온다 enter image description here

(패딩에도 불구을!)

왜 이런 일이 발생하는지 알고 싶습니다. 하단 바를 슬라이드하지 않고 (즉, 그냥 렌더링 할 때) Firefox에서 잘못 렌더링됩니다. 하단 바가있는 웹 페이지의 하단 부분이 숨겨집니다. 몇 가지 관련 CSS와

업데이트 : 나는 레일에있어 이후

는

.submissions-wrapper { 
    overflow: scroll; 
    padding-bottom: 80px; 
    //border-bottom: 80px solid rgb(255, 255, 255); 
} 

.submission-bottom-bar { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: 298; 
    padding: 10px 30px; 

    background-color: #2a3333; 
    border-top: 1px solid #0b0e10; 

    .inverted-button, 
    .flat-button { 
    margin-top: 0px; 
    margin-bottom: 0px; 
    padding: 10px 60px; 
    } 

    display: none; 
    //visibility: hidden; 
}

출처

2015-02-05 Tristan Tao

'HTML, 신체 {높이 : 100 %}' – isherwood

불행하게도 아주 일을하지 않았다 : /는 또한 전을 설정하지 높이를 100 %가 아닌 다른 곳으로 높이십시오. –

당신이 우리에게 가보지 못한 것은 거의 없습니다. :-) – isherwood

, 나는 브라우저 (서버 측)를 검출하기 위해 Browser 보석을 사용했다. 그런 다음 문제가있는 브라우저에 빈 div를 추가합니다. 이 솔루션은 css를 다루는 데 2 시간이 소요 된 후 30 초 이내에 작동하므로 빠른 수정을 원할 경우 권장됩니다. 아마도 가장 효율적이거나 우아한 것은 아닙니다.

샘플 코드 (아마도 확인 후 다른 브라우저를 추가합니다) :

- if browser.firefox? 
    .submission-bar-clone style="height: 80px" 

.submission-bottom-bar.clearfix 
/render the regular bar.

출처

2015-02-05 21:03:55

Firefox에서 패딩 하단이 나타나지 않습니다.

답변

관련 문제