css中sticker-footer佈局如何使用
- php中世界最好的语言原創
- 2018-03-21 09:53:052269瀏覽
這次帶給大家css中sticker-footer佈局如何使用，使用css中sticker-footer佈局的注意事項有哪些，下面就是實戰案例，一起來看一下。
在網頁設計中，Sticky footers設計是最古老和最常見的效果之一，大多數人都曾經經歷過。它可以概括如下：如果頁面內容不夠長的時候，頁腳塊貼在視窗底部；如果內容夠長時，頁腳區塊會被內容向下推送。這種效果不僅是無所不在，很受歡迎，而且實現起來看起來也非常容易。但實際上實現起來比預期花的時間更多。此外，在CSS2.1的解決方案中幾乎都必須為頁腳設定一個固定高度。這是很脆弱的，很少是可行的。實際上要實現這個效果過於複雜，而且還需要增加特定的標記和一些Hack手段。在CSS2.1中受到一些限制，但使用現代CSS，我們能把這個效果做得更好，那又該如何做呢？
1、嵌套層級不深，可直接繼承自body width：100%；height: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 本身高度
}
2、嵌套層級很深，無法直接從上級繼承百分比高度的
第一種方法：給需要的sticker-footer 建立一個wrapper
<body> <p id="wrapper"> <p id="sticker"> <p class="sticker-con">我是内容</p> </p> <p class="footer">我是脚</p> </p> </body>
.wrapper{
position:fixed; // 这样 wrapper 就可以直接从 html,body 继承 百分比高度了
overflow:auto; // 当高度超过 100% ;时产生滚动条
width:100%;
height:100%; // 继承自 body
}
// wrapper 内部包裹的结构，就如上所示了，css样式也一样
3. 當無法用百分比取得高度時，也可透過js方式取得
//css样式同第一种， 只是 sticker 的 min-height 用css获取
<body>
<p id="sticker">
<p class="sticker-con">我是内容</p>
</p>
<p class="footer">我是脚</p>
</body>
var sticker = document.querySelector('#sticker');
var h = document.body.clientHeight;
sticker.style.minHeight = h - 44 + 'px';
//这种方式也可应对一些特殊情况，比如有头部导航栏的情况，可以灵活的处理 min-height:
4. 強大的flex 佈局flex-direction:column
將wrapper容器display:flex; flex-direction:column
sticker: flex:1; 佔據footer以外的剩餘空間
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>sticker footer</title>
</head>
<style>
html,body{
width: 100%;
height: 100%;
background-color: #ccc;
margin:0;
padding: 0;
}
header{
height:44px;
width: 100%;
text-align: center;
line-height: 44px;
}
#wrapper{
display: flex;
flex-direction: column;
width: 100%;
/*height: 100%;*/
}
#sticker{
background-color: red;
flex: 1;
}
#sticker .sticker-con{
padding-bottom: 40px;
}
.footer{
background-color: green;
height: 40px;
}
</style>
<body>
<header>我是头部</header>
<p id="wrapper">
<p id="sticker">
<p class="sticker-con">我是内容</p>
</p>
<p class="footer">我是脚</p>
</p>
</body>
<script>
var wrapper = document.querySelector('#wrapper');
var h = document.body.clientHeight;
wrapper.style.minHeight = h - 44 + 'px'; // 减去头部导航栏高度
</script>
</html>
我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
建議閱讀：
以上是css中sticker-footer佈局如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn