CSS实例教程:永远在网页底部的网页布局

2016-02-20 00:05 8 1 收藏

人生本是一个不断学习的过程,在这个过程中,图老师就是你们的好帮手,下面分享的CSS实例教程:永远在网页底部的网页布局懂设计的网友们快点来了解吧!

【 tulaoshi.com - Web开发 】

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)看这个网页的底部,为什么会跑到那儿去呢?即使内容很少的情况下,它也始终在页面的底部。
否则页面底部将留下大量空白。

下面是它实现的代码:
div id="wrap"
    div id="main" class="clearfix"
        div id="content"
        /div
        div id="side"
        /div
    /div
/div
div id="footer"
/div


html, body, #wrap {height: 100%;}
body #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */
#footer {position: relative;
    margin-top: -150px; /* footer高度的负值 */
    height: 150px;
    clear:both;}


兼容性Hack:

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac */
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

来源:https://www.tulaoshi.com/n/20160220/1631239.html

延伸阅读
标签: Web开发
首先,三栏等高布局,顾名思义,可以概括为以下特征: 1、3列(白痴也知道) 2、这3列高等相等 3、这3列的高度不是固定不变,而是随着内容的变化而变化 Step 1: xhtml代码: div id="header"#header/div      div id="container"          ...
标签: Web开发
从这件事证明了,我专业知识欠缺很多,还需要持续学习,静下心来吧。  新进的公司,接触新的东西,一切都让我倍感紧张。很久没有接触设计的东西了,突然上手就要做界面,心里还是很忐忑的。 贴一下Card的这个界面。    以前很少使用这类的总宽度自适应100%,两列布局,一列固定,一列自适应的,于是,有点头大。 搜索...
标签: Web开发
初中级练习,高手朋友们可以飘过。要求达到如下图所示的效果,各位不妨试一试~   代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" hea...
标签: Web开发
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。网页教学网也希望通过网站让所有读者正视代码语义化的重要性,请把DIV+C...
标签: Web开发
除非你的网站只有一页,不然你一定会用的导航的.事实上,导航在网页设计中是最重要部分之一.你要用很多时间去考虑如何让浏览者更容易访问你的网站. 在以前做网站导航时,往往依赖于图像,表格,和javascript.而这些都严重的影响了网站的可访问性和可使用性.如果在一个缺乏支持javascript的用户,那么你的网站导航将无算正常的显示.比如说一个用户...

经验教程

474

收藏

15
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部