각질 소재를 사용한 클래식한 "스틱 푸터" 구현 방법
Angular Material 구현이 진행 중인 작업인 것은 알지만, 오늘 아침에는 이 작업에 익숙해지려고 노력했습니다.하지만 데모에 나와 있는 컨셉을 독립형 사이트에서 사용하는 것은 매우 어렵습니다.
지시가 같은 경우...<md-toolbar>그리고.<md-content>높이가 고정된 컨테이너에 사용되므로 성능이 우수합니다.어떻게 해야할지 고민하고 있어요<body이 예시와 같이 스틱 바닥글 레이아웃을 가질 수 있습니다.
여러 가지 변형을 시도했지만 DOM에서 콘텐츠를 삭제해도 작동하지 않는 예가 있습니다.콘텐츠가 존재하면 뷰포트를 넘어 확장되고 바닥글은 예상대로 뒤에 배치됩니다.최신 버전의 Chrome 및 Firefox에서는 이 예제가 콘텐츠를 삭제할 때 바닥글을 맨 아래에 유지하지만 IE에서는 전혀 작동하지 않습니다.IE에서 바닥글은 메인 콘텐츠 표시 여부에 관계없이 헤더 바로 아래에 표시됩니다.
데모: http://codepen.io/sstorie/pen/xbGgqb
<body ng-app="materialApp" layou-fill layout='column'>
<div ng-controller="AppCtrl" layout='column' flex>
<md-toolbar class='md-medium-tall'>
<div class="md-toolbar-tools">
<span>Fixed to Top</span>
<span flex></span>
<md-button class="md-raised" ng-click="toggleContent(!displayContent)">toggle content</md-button>
</div>
</md-toolbar>
<main class='md-padding' layout="row" flex>
<div flex>
<md-card ng-if="displayContent" ng-repeat = "card in cards">
{{$index}}
{{card.title}}
{{card.text}}
</md-card>
</div>
<div flex>
<md-card ng-if="displayContent" ng-repeat = "card in cards">
{{$index}}
{{card.title}}
{{card.text}}
</md-card>
</div>
</main>
<md-toolbar class="md-medium-tall">
<div layout="row" layout-align="center center" flex>
<span>FOOTER</span>
</div>
</md-toolbar>
</div>
</body>
Javascript:
angular.module('materialApp', ['ngMaterial'])
.controller('AppCtrl', function($scope) {
$scope.cards = [
{text: 'Bla bla bla bla bla bla bla ',
title: 'Bla' },
...repeat 10 times...
];
$scope.displayContent = true;
$scope.toggleContent = function(showContent) { $scope.displayContent = showContent; };
});
CSS:
body {
min-height: 100%;
height: auto !important;
height: 100%;
}
저는 CSS의 전문가가 아닙니다만, 각질 재료의 레이아웃 옵션에서는 간단하게 할 수 있을 것 같은 느낌이 들기 때문에, 여기서 뭔가 확실한 것을 빠뜨리고 싶다고 생각하고 있습니다.
보텀 시트 같은 건 필요 없어요.Flexbox 동작을 활용하면 바로 사용할 수 있습니다.
- 사용하다
layout="column"그리고.layout-fill메인 래퍼의 Atribute(사용자의 Atribute가 될 수 있습니다)body태그 지정). - 섹션을 만듭니다.
header,main그리고.footer. - 사용하다
flex귀속main.
예를 들어 @kuhnroyal 펜을 기반으로 합니다.
간단한 회피책으로 이 작업을 수행할 수 있습니다.
- 사용하다
min-height: calc(100vh - 176px)에main요소, (md-param의 경우 1024px = 2*88px) - 을 제거하다
layout='column'근소수에서 - 을 제거하다
layout-fill layout='column'몸으로
css/js를 CDN 버전 0.8.3으로 교체했습니다.이는 코드펜의 CSS/J와 IE10이 크래쉬하기 때문입니다.
Chrome, Firefox 및 IE10에서 테스트했습니다만, 정상적으로 동작하고 있는 것 같습니다.
http://codepen.io/anon/pen/azgdOZ
그래서 저는 그냥 각질소재로 실험하고 있는데 이걸 위해서 제가 한 건
<div layout="column" layout-fill>
<md-toolbar class="md-default-theme">
<!-- your stuff -->
</md-toolbar>
<md-content layout-fill role="main">
<!-- your main areas -->
</md-content>
<md-bottom-sheet>
<div>I am a sticky footer</div>
</md-bottom-sheet>
</div>
나는 이것이 그들이 원하는 모든 것을 할 수 있는지 확실히 알 만큼 충분히 실험하지 않았지만, 아직까지는 유망해 보인다.컨텐츠에 제약이 없는 경우는, 계속적으로 보텀 시트를 밀어내립니다.overflow-y: md-content에서 auto를 사용하면 동작할 수 있습니다(테스트할 앱이 아직 충분히 빌드되지 않았습니다).
브라우저 전체에서 어떤 답변도 결함 없이 안정적으로 작동한다는 것을 발견하지 못했습니다.
이 SO 답변에서 지적한 바와 같이, 다음과 같이 동작합니다.
<md-toolbar></md-toolbar>
<md-content flex layout="column">
<div layout="column" flex>
<main flex="none"></main>
<div flex></div>
<footer flex="none"></footer>
</div>
<md-content>
여기 예시를 위한 코드펜이 있습니다.
언급URL : https://stackoverflow.com/questions/27090257/how-to-implement-the-classic-sticky-footer-with-angular-material
'programing' 카테고리의 다른 글
| Reference Loop Handling이란?뉴턴소프트에서 무시한다고요? (0) | 2023.03.08 |
|---|---|
| createspy와 createspyobj의 차이점은 무엇입니까? (0) | 2023.03.08 |
| javascript에서 ISO 날짜 개체를 만듭니다. (0) | 2023.03.08 |
| Ajax 콜 진행 상황을 보여주는 가장 좋은 방법은 무엇입니까? (0) | 2023.03.08 |
| Woocommerce는 제품 ID별로 이미지 갤러리를 가져옵니다. (0) | 2023.03.08 |