이번에는 CSS에서 스티커 바닥글 레이아웃을 사용하는 방법과 CSS에서 스티커 바닥글 레이아웃을 사용할 때 주의사항에 대해 설명하겠습니다. 다음은 실제 사례입니다.
웹 디자인에서 끈적한 바닥글 디자인은 대부분의 사람들이 한번쯤 경험해 본 가장 오래되고 일반적인 효과 중 하나입니다. 이는 다음과 같이 요약할 수 있습니다. 페이지 내용이 충분히 길지 않으면 바닥글 블록이 창 하단에 붙여넣어지고, 내용이 충분히 길면 바닥글 블록이 내용에 의해 아래로 밀려납니다. 이 효과는 어디에나 있고 대중적일 뿐만 아니라 믿을 수 없을 만큼 쉽게 달성할 수 있습니다. 하지만 실제로 구현하는 데 예상보다 시간이 더 걸렸습니다. 또한 CSS 2.1의 솔루션은 거의 항상 바닥글의 고정 높이를 설정합니다. 이는 매우 취약하고 실현 가능성이 거의 없습니다. 실제로 이 효과를 구현하는 것은 너무 복잡하며 특정 태그와 일부 해킹 방법을 추가해야 합니다. CSS2.1에는 몇 가지 제한 사항이 있지만 최신 CSS를 사용하면 이 효과를 더 좋게 만들 수 있는데 어떻게 해야 할까요?
1. 중첩 수준은 깊지 않으며 본문 너비: 100%, 높이: 100%, 중첩 수준은 매우 깊고 백분율 높이는 상위 수준에서 직접 상속될 수 없습니다.
첫 번째 방법: 필요한 스티커 바닥글에 대한 래퍼 만들기
// html <body> <p id="sticker"> <p class="sticker-con">我是内容</p> </p> <p class="footer">我是脚</p> </body>
// css html,body{ width:100%; height:100%; } #sticker{ width:100%; min-height:100%; } .sticker-con{ padding-bottom:40px; // 40px 为 footer 本身高度 } .footer{ margin-top:-40px; // 40px 为 footer 本身高度 }
3. 높이를 백분율로 얻을 수 없는 경우 js
<body> <p id="wrapper"> <p id="sticker"> <p class="sticker-con">我是内容</p> </p> <p class="footer">我是脚</p> </p> </body>
4를 통해 얻을 수도 있습니다. 강력한 플렉스 레이아웃 flex-direction:column
wrapper 컨테이너 표시: flex-direction:column
sticker: flex:1; 바닥글을 제외한 나머지 공간을 차지합니다.
.wrapper{ position:fixed; // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了 overflow:auto; // 当高度超过 100% ;时产生滚动条 width:100%; height:100%; // 继承自 body } // wrapper 内部包裹的结构,就如上所示了,css样式也一样
이 기사의 사례를 읽은 후에는 더 흥미로운 정보를 얻으실 수 있을 것입니다. , PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!
추천 도서:
사진 벽에 3D 효과를 구현하는 순수 CSS팬 패턴을 그리는 CSS위 내용은 CSS에서 스티커 바닥글 레이아웃을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!