콘텐츠를 사이드 바 아래쪽에 고정시키는 방법은 무엇입니까?

사이드 바를 가지고있는 사이트에서 일하고 있습니다. 그 사이드 바에는 사이드 바 아래쪽에있는 몇 가지 피드백 버튼이 있습니다. body라는 div에있는 feedback이라는 div에 피드백 버튼이 있습니다. 나는 다음에 무엇을 해야할지 정말 모르겠어요,콘텐츠를 사이드 바 아래쪽에 고정시키는 방법은 무엇입니까?

<div class="card"> 
    <div class="card-header"></div> 
    <div class="card-body"> 
    SIDEBAR CONTENT 
    </div> 
    <div class="feedback"> 
    FEEDBACK BUTTONS 
    </div> 
</div>

그러나 그것은 작동하지 않습니다

여기

.card{ 
    position: relative; 

    .feedback{ 
    position: absolute; 
    bottom: 0; 
    } 
}

는 HTML의 구조 : 그럼 내하는 SCS 파일에 내가있다.

출처

2016-09-30 user2320239

카드 또는 의견을 보내시겠습니까? – user2320239

html을 우리에게 보여주세요 – Weedoze

어쨌든'고정 된 '것은 좋은 생각이 아닐지도 모릅니다. 이를위한 HTML 구조를 보여 주거나 [ "sticky footer"] (http://stackoverflow.com/search?tab=votes&q=%5bjavascript%5dsticky%20footer)를 검색하십시오. – Teemu

레이아웃에 FlexBox를 사용 해본 적이 있습니까?

요즘에는 모든 주요 브라우저가 지원되지만 꽤 잘 지원됩니다. 나는이 그것을 어떻게해야 내가 몇 가지 예제 코드 당신에게

.card{ 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
} 


.card-body{ 
    flex: 1; 
}

을 줄 거라고 생각 :

이

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

편집을 살펴보십시오. 최소 높이를 설정해야합니다. 전체 뷰포트를 덮고 싶다면 100vh을 사용할 수 있습니다.

출처

2016-09-30 08:42:39 JHolub

감사합니다. 이것은 대부분 작동하지만 작은 문제는 피드백 영역의 높이 자체가 바뀔 수 있다는 것입니다. 그래서 바닥 글이 아래쪽에서 더 커지게됩니다. 받아 들일 수 있지만, 나는 오히려 그것이 정상에서 확장하고 싶습니다. 이것을 할 수있는 방법이 있습니까? – user2320239

'min-height'를 아주 작게 설정 했습니까? 그런 다음 **. card-body **는 콘텐츠의 크기 (패딩 포함)가 될 가능성이 큽니다. 이렇게하면 피드백 바닥 글이 항상 콘텐츠에 직접 첨부됩니다. 그리고 그것이 자라면 이상하게 보이지 않습니다. 기본적으로 콘텐츠와 피드백 사이의 간격은 사라질 것입니다. – JHolub

또한 사이드 바 높이가 100 %로되어있어 피드백 버튼이 페이지 아래쪽에 표시되는 것을 의미합니다. – user2320239

div.feedback에

출처

2016-09-30 08:48:00 Umberto

감사하지만이 방법은 대부분 피드백이있는 카드의 콘텐츠가 화면 하단에 도달 할 때 작동합니다. 피드백 div는 내용이 겹치기 때문에 발생했을 때 푸시 다운 되려는 피드백이 있습니다. 이것을 할 수있는 방법이 있습니까? – user2320239

Flexbox 접근법은 – JHolub

을 커버해야합니다.이 경우'fixed'는 좋은 생각이 아닙니다. JHolub 솔루션이 작동해야합니다 – Umberto

콘텐츠를 사이드 바 아래쪽에 고정시키는 방법은 무엇입니까?

답변

관련 문제