用css設定網頁佔滿螢幕的執行個體代碼

來源:互聯網
上載者:User
本文用css設定網頁高100%寬100%佔滿螢幕,可以看一下,挺不錯的

<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>css設定網頁高100%寬100%佔滿螢幕</title><meta name="description" content=""><meta name="keywords" content=""><style type="text/css">*{margin: 0;padding: 0;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}html {min-height: 100%;_height:100%;height:100%;}body {min-height: 100%;_height:100%;height:100%;/*background: #ff0000;*/}#all {background: #EEE;border-left: 1px solid #ff0000;border-right: 1px solid #ff0000;padding: 0 20px 0 20px;margin: auto;font: 1.5em arial, verdana, sans-serif;width: 100%;min-height: 100%;_height:100%;}#header,#pagefooter,#container {margin: 0 auto;width: 85%;border: 1px solid #000000;}#content {float: right;width: 66%;border: 1px solid green;}#side {float: left;width: 33%;border: 1px solid blue;}.clearfix::before {content: "";display: table;width: 0;height: 0;overflow: hidden;}.clearfix::after {content: "";clear: both;display: table;width: 0;height: 0;overflow: hidden;}.clearfix {zoom: 1;}</style></head><body><p id="all"><p id="header">頭部</p><p id="container" class="clearfix"><p id="content">中部內容</p><p id="side">中部側邊</p></p><p id="pagefooter">我是底部</p></p></body></html>

需要學習CSS的同學請關注php中文網CSS視頻教程,眾多css線上視頻教程可以免費觀看!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.