내용 차단/하단 바닥에 머무르지 않는 바닥 글

Question

내용이 페이지에있을 때 배경이 늘어나지 않도록 코드를 CSS에 추가했습니다. 그러나 이제는 내 콘텐츠가 잘려나 가고 있으며, 바닥 글이 페이지 하단에 머물러 있지 않기 때문에 생각합니다. 페이지가 약간 느리게로드되면 표시되지만 내용이로드되면 더 이상 바닥 글을 볼 수 없습니다. 높이를 변경하지 않고 아래로 스크롤 할 수도 없습니다. 나는 플러그인을 시도했고 추가 코드는 다른 게시물에 제안했다. 아무도 도움이되지 못했습니다. 배경이 계속 늘어나지 않도록 코드를 유지하면서 맨 아래에 내 바닥 글을 유지할 수있는 방법이 있습니까? 편집 스트레칭을 멈추는 데 사용 된 코드를 유감스럽게 생각합니다. 아래에서 볼 수 있습니다. 또한, 무슨 일이 일어나고 있는지의 예

#primary 
{ 
position: absolute; 
left: 0; 
height: 100%; 
background-size: cover; 
background-attachment: fixed; 
} 

This is a screenshot of the original issue.here.을 볼 수 있습니다. 내 콘텐츠 (플레이어)는 완전히 볼 수 있지만 배경이 늘어납니다. position: absolute;을 추가하면 올바르게로드 할 배경이 있지만 이제는 내용이 잘립니다. 결과의 스크린 샷은 here for my mobile device 및 Here for my desktop.으로 볼 수 있습니다. 보시다시피 플레이어가 모바일에서 끊어지며 둘 다 바닥 글을 표시하지 않습니다. 처음에는 바닥 글이로드되고 있다고 생각했습니다. top의 값을 변경하면 콘텐츠 뒤에있는 것으로 보이는 바닥 글을 볼 수 있습니다. 나는 이것을 top: 370으로 바꿨고 this for on my mobile, and this on my desktop.을 얻었다. 바닥 글의 소셜 아이콘은 있지만 콘텐츠 뒤에 있고 페이지 중간에 있습니다. 그것이 내 콘텐츠가 잘린 이유입니다.

Answer 1

문제 해결 및 웹 검색을 며칠 후, 내 문제에 대한 해결책을 찾았습니다. 바닥 글을 페이지의 맨 아래에 놓는 코드를 추가했습니다. 코드는 모든 내용의 맨 아래에 푸터를 붙인 채로 남겨 두었습니다. 또한 내 콘텐츠를 차단하지도 않았습니다. 그래서 나는 그것이 바닥 글이 아니라는 것을 알고있었습니다.

내가 꼬리말을 내용의 맨 아래에 놓고 싶었던 방식. 그래서 고정 된 꼬리말은 내가 필요로하는 것이 아니지만, 푸딩 푸터가 트릭을 할 것이라고 알았습니다. 분명히 페이지의 내용이 많지 않을 때, 종종 꼬리말이 내용이 멈추는 부분까지 밀어 넣을 것입니다. 그래서 다음 단계는 콘터를 잘라내는 것이 무엇인지 정확히 알아내는 것이 었습니다.

레이아웃 중간에 잘라내는 컨테이너입니다. #primary 코드에서 백그라운드 스톱 스트레칭을 만드는 것이 잘못된 선택자이므로 body으로 변경했습니다. 컨테이너의 높이와 너비를 100 %로 만드는 코드도 추가했습니다. 그런 다음 붐이 일했습니다. 아래는 문제를 해결하는 데 사용 된 추가 CSS입니다. 도와 주신 모든 분들께 감사드립니다.

body { 
width:100%; 
height:100%;} 


body { 
position: absolute; 
background-size: cover; 
background-attachment: fixed;} 

Answer 2

귀하의 질문을 완전히 이해할 수 있는지 확실하지 않지만 CSS 문제는 height: 100%;입니다. 100 % 높이를 추가하면 화면의 높이가 100 %가됩니다. 페이지 상단에서 시작하지 않기 때문에 보이는 영역의 아래쪽으로 아래로 확장됩니다. CSS top: 0;을 추가하면 의미를 알 수 있습니다. 더 이상 화면 하단에 나타나지 않지만 머리글과 겹칩니다. 이 문제를 얻으려면, 당신은에 CSS를 변경할 수 있습니다

position: absolute; 
left: 0; 
height: calc(100% - 54px); /*Minus the height of the header*/ 
top: 54px; /*The height of the header*/ 
background-size: cover; 
background-attachment: fixed; 

좀 더 구체적으로 문제를 설명하고 내가 도울 수 있다면 내가 볼 드리겠습니다하지 않을 경우,이 도움이되기를 바랍니다!