하단 바닥 글

Question

바닥 글이 붙어 있습니다. https://jsfiddle.net/annaolsh/pLzv5sg5/13/

#footer { 
    right: 0; 
    bottom: 0; 
    left: 0; 
    padding: 1rem; 
    background-color: orange; 
    text-align: center; 
} 

네비게이션 바 상단에 표시되며 바닥 글은 맨 아래에 작은 화면에서 - -

는이 코드가 맞습니다.

그러나 네비게이션 바는 왼쪽에 수직으로 표시되는 큰 화면에서

는, 바닥 글이 사라집니다. 바닥 글을 표시하는 방법을 알아낼 수 없습니다. 끈적 거리지 않아도됩니다. 사용자는 아래로 스크롤해야 볼 수 있습니다 (작은 화면과 동일). 꼬리말의 너비는 화면 크기의 100 % 여야합니다.

감사합니다.

Answer 1

이 꺼져 있습니다. 페이지에서 각 요소의 위치를 ​​사용하여 수행해야 할 작업이 있습니다. 위치가 설정된 유일한 노드는 왼쪽 메뉴이며 고정되어 있습니다.

가장 쉬운 수정 프로그램은 다음과 같은 CSS로 재생하는 것입니다 :

#footer { 
    position: relative; 
    clear:both; 
    padding: 1rem; 
    background-color: orange; 
    text-align: center; 
} 

제거는 하단과 오른쪽, 왼쪽. 상대적인 위치와 명확한 위치를 추가하십시오. 둘 다.

DEMO : https://jsfiddle.net/pLzv5sg5/14/

Answer 2

바닥 글에 대한 콘텐츠 래퍼 즉 내부 용기 유체 사용 다음 CSS 코드를 바닥 글 코드를 추가

주어진 코드 위치에서

#footer { 
padding: 1rem; 
background-color: orange; 
text-align: center; 
} 

https://jsfiddle.net/rppmvgeo/