前端設計之CSS布局:上中下三欄自適應高度CSS布局

來源:互聯網
上載者:User

網頁代碼:

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>CSS布局:上中下三欄自適應高度CSS布局</title><STYLE type="text/css">*{margin:0;padding:0;}body, html { margin: 0; padding:0 !important; padding:90px 0 32px 0; width:100%; height:100%; overflow:hidden;}.header {    background: #C9F;    width: 100%;    height: 90px;    overflow: hidden;    position: absolute;    top: 0;    width: 100%;    text-align: center;    background-color: #FFCC00;}.content { position:absolute!important; position:relative; top:90px!important; top:0; bottom:32px; width:100%; overflow:hidden; height:auto!important; height:100%; left: -3px;}.main { height:100%; background:#66CCFF; overflow-y:auto; text-align:center;}.footer {    background: #9CF;    width: 100%;    height: 40px;    color: #e1efff;    line-height: 32px;    letter-spacing: 1px;    text-align: center;    clear: both;    position: absolute;    bottom: 0;    left: 0;    background-color: #FF6600;}</STYLE></head><body><!-- 代碼 開始 --><div class="header">    <br/>    這裡是頂部</div><div class="content">    <div class="main">        <br /><br />        網頁header和footer高度是固定的,中間的content高度自適應瀏覽器視窗高度代碼,隨著視窗的大小變動都是滿屏的。    </div></div><div class="footer">    這裡是底部</div><!-- 代碼 結束 --></body></html>

效果截圖



相關文章

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.