av手机免费在线观看,国产女人在线视频,国产xxxx免费,捆绑调教一二三区,97影院最新理论片,色之久久综合,国产精品日韩欧美一区二区三区

網(wǎng)頁設(shè)計(jì)

頁腳始終保持在頁面底部的網(wǎng)頁布局方法

時(shí)間:2025-05-02 08:18:10 網(wǎng)頁設(shè)計(jì) 我要投稿
  • 相關(guān)推薦

頁腳始終保持在頁面底部的網(wǎng)頁布局方法

  導(dǎo)語:用CSS創(chuàng)建一個(gè)高度自適應(yīng)布局,如何保證頁腳(footer)在內(nèi)容不超過一屏的情況下始終保持在布局最下方是一個(gè)比較頭疼的事。下面就由百分網(wǎng)小編為大家介紹一下頁腳始終保持在頁面底部的網(wǎng)頁布局方法,希望對(duì)大家能有所幫助。

  步驟:

  1、為了讓瀏覽器識(shí)別高度100%我們需要先給 html 和 body 加上一個(gè)高度值,同時(shí)清除所有元素的 margin 和 padding。順便提一下,經(jīng)過我的測試,html 和 body 的 height: 100%; 等于整個(gè)瀏覽器窗口的總高度,無論內(nèi)容是否超過一屏。而它們下一級(jí)子元素 height: 100%; 則等于第一屏的高度。如何,是不是有點(diǎn)不好理解?

  * {

  margin: 0;

  padding: 0;

  }

  html, body {

  height: 100%;

  }

  2、因?yàn)樯厦嫣岬降膯栴},所以為了讓布局自適應(yīng)高度,我們要加上 min-height: 100%;,雖然IE不支持這個(gè)屬性但是IE的 height: 100%; 有同樣的作用:

  #wrapper {

  min-height: 100%;

  }

  * html #wrapper {

  height: 100%;

  }

  這樣,一個(gè)最簡單的最小高度滿一屏的自適應(yīng)布局就做好了。為了便于查看,我加了一些寬度和背景色修飾,如下:

  * {

  margin: 0;

  padding: 0;

  }

  html, body {

  height: 100%;

  text-align: center;

  font: 12px/1.4 Verdana, sans-serif;

  background: #f00;

  }

  #wrapper {

  width: 770px;

  min-height: 100%;

  background: #ccc;

  margin: auto;

  text-align: left;

  }

  * html #wrapper {

  height: 100%;

  }

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>jzxue.com-建站學(xué)</title>

  <style type="text/css">

  /*<![CDATA[*/

  * {

  margin: 0;

  padding: 0;

  }

  html, body {

  height: 100%;

  text-align: center;

  font: 12px/1.4 Verdana, sans-serif;

  background: #F00;

  }

  #wrapper {

  width: 770px;

  min-height: 100%;

  background: #ccc;

  margin: auto;

  text-align: left;

  }

  * html #wrapper {

  height: 100%;

  }

  #header {

  background: Green;

  height: 40px;

  }

  #sidebar {

  float: left;

  width: 200px;

  background: Gray;

  }

  #content-box {

  float: right;

  width: 570px;

  background: Olive;

  }

  #footer {

  height: 50px;

  background: Background;

  width:770px;

  margin: auto;

  }

  /*]]>*/

  </style>

  </head>

  <body>

  <p id="wrapper">

  <p id="header">此處顯示  id "header" 的內(nèi)容</p>

  <p id="content-box">此處顯示  id "content-box" 的內(nèi)容</p>

  <p id="sidebar">此處顯示  id "sidebar" 的內(nèi)容</p>

  </p>

  <p id="footer">此處顯示  id "footer" 的內(nèi)容</p>

  </body>

  </html>

【頁腳始終保持在頁面底部的網(wǎng)頁布局方法】相關(guān)文章:

網(wǎng)頁設(shè)計(jì)布局方法11-10

網(wǎng)頁設(shè)計(jì)中防止頁面被撐開的方法06-16

wps文字如何布局頁面07-13

網(wǎng)站制作頁腳如何自適應(yīng)布局11-12

交互頁面網(wǎng)頁設(shè)計(jì)07-19

網(wǎng)頁布局方式07-16

網(wǎng)頁的排版與布局08-26

網(wǎng)頁布局基礎(chǔ)08-10

網(wǎng)頁設(shè)計(jì)的布局08-13