cssレイアウト-コンテンツ適応画面
5405 ワード
cssページレイアウトは、コンテンツ部分の適応画面を実現し、コンテンツの高さがブラウザウィンドウの高さより小さい場合、フッターはブラウザウィンドウの下部にある.コンテンツの高さがブラウザウィンドウの高さより高い場合、フッターは自動的にページの下部に支えられます.
転載先:https://www.cnblogs.com/wpp281154/p/10443793.html
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
.main {
overflow: hidden;
position: relative;
min-height: 100%;
background: #eee;
}
.red {
margin-bottom: 50px;
height: 200px;
background: #f00;
}
.footer {
position: absolute;
bottom: 0;
left: 0;
height: 50px;
width: 100%;
background: #0f0;
}
style>
<body>
<div class="main">
<div class="red">div>
<div class="footer">div>
div>
body>転載先:https://www.cnblogs.com/wpp281154/p/10443793.html