精通css(7)-实例

简介:

1.让footerr固定在底部

来源于http://ryanfait.com/resources/footer-stick-to-bottom-of-page/一种很简单的方法:

<body>
<div class="wrapper">
    <p>Your website content here.</p>
    <div class="push"></div>
</div>
<div class="footer">
    <p>Copyright (c) 2008</p>
</div>
</body>

<style>
  * {
   margin: 0;
  }
   html, body {
   height: 100%;
  }
   .wrapper {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -4em;
  }
   .footer, .push {
   height: 4em;
  }
  .footer{
    background: #400;
  }

</style>


相关文章
|
5月前
|
前端开发
CSS 选择器优先级详解及实例演示
CSS 选择器优先级详解及实例演示
|
6月前
|
前端开发
CSS 实例
CSS 实例。
30 6
|
6月前
|
前端开发 JavaScript
jquery+css实现Tab栏切换的代码实例
jquery+css实现Tab栏切换的代码实例
108 0
|
6月前
|
前端开发 容器
CSS BFC是什么,应用实例
CSS BFC是什么,应用实例
49 0
|
6月前
|
移动开发 前端开发 HTML5
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
【Web端智能聊天客服】之HTML、CSS、Bootstrap的讲解及实例(超详细必看 附源码)
250 0
|
11月前
|
XML 前端开发 小程序
css实例(一)鼠标hover下拉菜单
红框标注位置,有一个小尖尖角,这个使用样式是这样实现的。 css 复制代码
157 0
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
17607 11
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位
164 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
192 0