집 > 기사 > 웹 프론트엔드 > CSS에서 스티커 바닥글 레이아웃을 사용하는 방법

CSS에서 스티커 바닥글 레이아웃을 사용하는 방법

php中世界最好的语言원래의: 2018-03-21 09:53:052275검색

이번에는 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 중국어 웹사이트의 다른 관련 기사도 주목해주세요!