整合營(yíng)銷(xiāo)服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          設(shè)置div高度等于動(dòng)態(tài)寬度

          目中有時(shí)候會(huì)遇到這個(gè)問(wèn)題:一行有3個(gè)div,希望這3個(gè)div平分屏幕寬度,并且高度等于寬度。

          第一個(gè)問(wèn)題:平分屏幕寬度

          可以對(duì)div設(shè)置百分比寬度,而不是直接用px寬度,這里用到了響應(yīng)式設(shè)計(jì)的思想,可以參考這篇文章:自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)(Responsive Web Design)

          第二個(gè)問(wèn)題:動(dòng)態(tài)設(shè)置高度和寬度一致

          有兩種方法,一種是用js動(dòng)態(tài)設(shè)置,一種是直接用CSS設(shè)置

          先看下html代碼

          <ul>

          <li class="container">

          <div class="dummy">

          </div>

          <div class="element">

          some text

          </div>

          </li>

          <li class="container">

          <div class="dummy">

          </div>

          <div class="element">

          some text

          </div>

          </li>

          <li class="container">

          <div class="dummy">

          </div>

          <div class="element">

          some text

          </div>

          </li>

          </ul>

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23

          公用的CSS

          ul,li{

          list-style: none;

          }

          * {

          margin: 0;

          padding: 0;

          outline: 0

          }

          body {

          margin: 0;

          padding: 0;

          -webkit-appearance: none;

          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

          font-size: 16px;

          }

          ul{

          margin:10px;

          }

          .container {

          display: inline-block;

          position: relative;

          width: 32%;

          text-align: center;

          }

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24

          用js動(dòng)態(tài)設(shè)置

          var cw = $('.dummy').width();

          $('.dummy').css({'height':cw+'px'});

          $(window).resize(function() {

          var cw = $('.dummy').width();

          $('.dummy').css({'height':cw+'px'});

          });

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          用CSS設(shè)置

          .dummy {

          padding-top: 100%; /* 1:1 aspect ratio */

          width: 100%;

          background: #333333;

          }

          • 1
          • 2
          • 3
          • 4
          • 5

          CSS設(shè)置padding-top的原理:Use CSS to Specify the Aspect Ratio of a Fluid Element

          /———————————————————

          然后嘗試對(duì)圖片設(shè)置高度等于動(dòng)態(tài)寬度

          js方法很簡(jiǎn)單,跟上面的方法基本相同

          <ul>

          <li class="container">

          <img src="images/test_1.jpg"/>

          <div class="element">

          some text

          </div>

          </li>

          <li class="container">

          <img src="images/test_2.jpg"/>

          <div class="element">

          some text

          </div>

          </li>

          <li class="container">

          <img src="images/test_3.jpg"/>

          <div class="element">

          some text

          </div>

          </li>

          </ul>

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20

          .container {

          display: inline-block;

          position: relative;

          width: 32%;

          text-align: center;

          }

          .container img{

          width: 100%;

          height:100%;

          }

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10

          var cw = $('.dummy').width();

          $('.dummy').css({'height':cw+'px'});

          $(window).resize(function() {

          var cw = $('.dummy').width();

          $('.dummy').css({'height':cw+'px'});

          });

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          CSS方法

          <ul>

          <li class="container">

          <div class="dummy">

          </div>

          <div class="element">

          some text

          </div>

          </li>

          <li class="container">

          <div class="dummy">

          </div>

          <div class="element">

          some text

          </div>

          </li>

          <li class="container">

          <div class="dummy">

          </div>

          <div class="element">

          some text

          </div>

          </li>

          </ul>

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23

          .container {

          display: inline-block;

          position: relative;

          width: 32%;

          text-align: center;

          }

          .dummy{

          padding-top: 100%; /* 1:1 aspect ratio */

          width: 100%;

          background:url(images/test_3.jpg) no-repeat;

          -webkit-background-size: 100%;

          background-size: 100%;

          }

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13

          通過(guò)設(shè)置background可以實(shí)現(xiàn)。

          div包含img的方法沒(méi)有試驗(yàn)成功,以后繼續(xù)嘗試

          /————————————-

          還有一個(gè)問(wèn)題,怎么設(shè)置div和img之間的padding,又能保證div寬度是屏幕寬度的三分之一?

          網(wǎng)頁(yè)的實(shí)際開(kāi)發(fā)中,有時(shí)候需要給div標(biāo)簽元素添加一個(gè)滾動(dòng)條(比如水平的或者垂直的滾動(dòng)條),我們?cè)撛趺磳?xiě)css代碼呢?

          給div設(shè)置滾動(dòng)條需要分成兩步走:

          一、設(shè)置步驟

          1、設(shè)置div的高度以及寬度

          如果不設(shè)置高度和寬度的話,內(nèi)容多也不會(huì)出現(xiàn)滾動(dòng)條,因?yàn)闆](méi)有邊界能讓瀏覽器判斷內(nèi)容長(zhǎng)度是否需要出現(xiàn)滾動(dòng)條。

          2、設(shè)置div的overflow屬性,你可以設(shè)置成auto(水平和垂直都有),也可以單獨(dú)設(shè)置overflow-x(水平滾動(dòng)條),也可以單獨(dú)設(shè)置overflow-y(垂直滾動(dòng)條)。

          二、實(shí)例說(shuō)明

          <div style="height:100px;width:300px;overflow:auto;background:#FFFFFF;">這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記這里是迷糊筆記</div>

          運(yùn)行如下:

          更多設(shè)置

          只設(shè)置水平滾動(dòng)條:

          <div style="width:300px;overflow-x:auto"></div>

          只設(shè)置垂直滾動(dòng)條:

          <div style="height:100px;overflow-y:auto"></div>

          水平和垂直都設(shè)置:

          <div style="width:300px;height:100px;overflow-x:auto;overflow-y:auto"></div>

          頁(yè)可見(jiàn)區(qū)域?qū)挘篸ocument.body.clientWidth

          網(wǎng)頁(yè)可見(jiàn)區(qū)域高:document.body.clientHeight

          網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)

          網(wǎng)頁(yè)可見(jiàn)區(qū)域高:document.body.offsetHeight (包括邊線的寬)

          網(wǎng)頁(yè)正文全文寬:document.body.scrollWidth

          網(wǎng)頁(yè)正文全文高:document.body.scrollHeight

          網(wǎng)頁(yè)被卷去的高:document.body.scrollTop

          網(wǎng)頁(yè)被卷去的左:document.body.scrollLeft

          網(wǎng)頁(yè)正文部分上:window.screenTop

          網(wǎng)頁(yè)正文部分左:window.screenLeft

          屏幕分辨率的高:window.screen.height

          屏幕分辨率的寬:window.screen.width

          屏幕可用工作區(qū)高度:window.screen.availHeight

          屏幕可用工作區(qū)寬度:window.screen.availWidth

          HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

          scrollHeight: 獲取對(duì)象的滾動(dòng)高度。

          scrollLeft:設(shè)置或獲取位于對(duì)象左邊界和窗口中目前可見(jiàn)內(nèi)容的最左端之間的距離

          scrollTop:設(shè)置或獲取位于對(duì)象最頂端和窗口中可見(jiàn)內(nèi)容的最頂端之間的距離

          scrollWidth:獲取對(duì)象的滾動(dòng)寬度

          offsetHeight:獲取對(duì)象相對(duì)于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度

          offsetLeft:獲取對(duì)象相對(duì)于版面或由 offsetParent 屬性指定的父坐標(biāo)的計(jì)算左側(cè)位置

          offsetTop:獲取對(duì)象相對(duì)于版面或由 offsetTop 屬性指定的父坐標(biāo)的計(jì)算頂端位置

          event.clientX 相對(duì)文檔的水平座標(biāo)

          event.clientY 相對(duì)文檔的垂直座標(biāo)

          event.offsetX 相對(duì)容器的水平坐標(biāo)

          event.offsetY 相對(duì)容器的垂直坐標(biāo)

          document.documentElement.scrollTop 垂直方向滾動(dòng)的值

          event.clientX+document.documentElement.scrollTop 相對(duì)文檔的水平座標(biāo)+垂直方向滾動(dòng)的量

          IE,F(xiàn)ireFox 差異如下:

          IE6.0、FF1.06+:

          clientWidth = width + padding

          clientHeight = height + padding

          offsetWidth = width + padding + border

          offsetHeight = height + padding + border

          IE5.0/5.5:

          clientWidth = width - border

          clientHeight = height - border

          offsetWidth = width

          offsetHeight = height

          (需要提一下:CSS中的margin屬性,與clientWidth、offsetWidth、clientHeight、offsetHeight均無(wú)關(guān))

          網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.clientWidth

          網(wǎng)頁(yè)可見(jiàn)區(qū)域高: document.body.clientHeight

          網(wǎng)頁(yè)可見(jiàn)區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

          網(wǎng)頁(yè)可見(jiàn)區(qū)域高: document.body.offsetHeight (包括邊線的高)

          網(wǎng)頁(yè)正文全文寬: document.body.scrollWidth

          網(wǎng)頁(yè)正文全文高: document.body.scrollHeight

          網(wǎng)頁(yè)被卷去的高: document.body.scrollTop

          網(wǎng)頁(yè)被卷去的左: document.body.scrollLeft

          網(wǎng)頁(yè)正文部分上: window.screenTop

          網(wǎng)頁(yè)正文部分左: window.screenLeft

          屏幕分辨率的高: window.screen.height

          屏幕分辨率的寬: window.screen.width

          屏幕可用工作區(qū)高度: window.screen.availHeight

          屏幕可用工作區(qū)寬度: window.screen.availWidth

          -------------------

          技術(shù)要點(diǎn)

          本節(jié)代碼主要使用了Document對(duì)象關(guān)于窗口的一些屬性,這些屬性的主要功能和用法如下。

          要得到窗口的尺寸,對(duì)于不同的瀏覽器,需要使用不同的屬性和方法:若要檢測(cè)窗口的真實(shí)尺寸,在Netscape下需要使用Window的屬性;在IE下需要 深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè);在DOM環(huán)境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

          Window對(duì)象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對(duì)象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。

          Document對(duì)象的body屬性對(duì)應(yīng)HTML文檔的標(biāo)簽。Document對(duì)象的documentElement屬性則表示HTML文檔的根節(jié)點(diǎn)。

          document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

          實(shí)現(xiàn)代碼

          <!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>

          <title>請(qǐng)調(diào)整瀏覽器窗口</title>

          <meta http-equiv="content-type" content="text/html; charset=gb2312">

          </head>

          <body>

          <h2 align="center">請(qǐng)調(diào)整瀏覽器窗口大小</h2><hr>

          <form action="#" method="get" name="form1" id="form1">

          <!--顯示瀏覽器窗口的實(shí)際尺寸-->

          瀏覽器窗口 的 實(shí)際高度: <input type="text" name="availHeight" size="4"><br>

          瀏覽器窗口 的 實(shí)際寬度: <input type="text" name="availWidth" size="4"><br>

          </form>

          <script type="text/javascript">

          <!--

          var winWidth = 0;

          var winHeight = 0;

          function findDimensions() //函數(shù):獲取尺寸

          {

          //獲取窗口寬度

          if (window.innerWidth)

          winWidth = window.innerWidth;

          else if ((document.body) && (document.body.clientWidth))

          winWidth = document.body.clientWidth;

          //獲取窗口高度

          if (window.innerHeight)

          winHeight = window.innerHeight;

          else if ((document.body) && (document.body.clientHeight))

          winHeight = document.body.clientHeight;

          //通過(guò)深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè),獲取窗口大小

          if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)

          {

          winHeight = document.documentElement.clientHeight;

          winWidth = document.documentElement.clientWidth;

          }

          //結(jié)果輸出至兩個(gè)文本框

          document.form1.availHeight.value= winHeight;

          document.form1.availWidth.value= winWidth;

          }

          findDimensions();

          //調(diào)用函數(shù),獲取數(shù)值

          window.onresize=findDimensions;

          //-->

          </script>

          </body>

          </html>

          源程序解讀

          (1)程序首先建立一個(gè)表單,包含兩個(gè)文本框,用于顯示窗口當(dāng)前的寬度和高度,并且,其數(shù)值會(huì)隨窗口大小的改變而變化。

          (2)在隨后的JavaScript代碼中,首先定義了兩個(gè)變量winWidth和winHeight,用于保存窗口的高度值和寬度值。

          (3)然后,在函數(shù)findDimensions ( )中,使用window.innerHeight和window.innerWidth得到窗口的高度和寬度,并將二者保存在前述兩個(gè)變量中。

          (4)再通過(guò)深入Document內(nèi)部對(duì)body進(jìn)行檢測(cè),獲取窗口大小,并存儲(chǔ)在前述兩個(gè)變量中。

          (5)在函數(shù)的最后,通過(guò)按名稱訪問(wèn)表單元素,結(jié)果輸出至兩個(gè)文本框。

          (6)在JavaScript代碼的最后,通過(guò)調(diào)用findDimensions ( )函數(shù),完成整個(gè)操作。


          主站蜘蛛池模板: 精品无码av一区二区三区| 国产无码一区二区在线| 午夜福利一区二区三区高清视频 | 亚洲中文字幕乱码一区| 亚洲色精品三区二区一区| 春暖花开亚洲性无区一区二区| 国产免费一区二区三区VR| 国产精品一区三区| 亚洲国产一区二区三区青草影视| 亚洲国产成人久久综合一区| 国产精品亚洲专区一区| 国产在线精品一区二区中文| 亚洲av无码一区二区三区人妖| 日本丰满少妇一区二区三区| 性色av一区二区三区夜夜嗨| 亚洲色无码专区一区| 国产伦精品一区二区免费| 中文字幕在线一区二区在线| 美女AV一区二区三区| 精品无码一区二区三区爱欲| 国产精品一区二区香蕉| 日本一区二区三区精品中文字幕| 亚洲一区二区三区成人网站| 久久无码精品一区二区三区| 中文字幕无码不卡一区二区三区| 亚洲国产一区二区视频网站| 国产精品一区在线播放| 不卡一区二区在线| 天堂成人一区二区三区| 国产精品高清一区二区三区| 国产中文字幕一区| 精品人妻系列无码一区二区三区| 国产精品 视频一区 二区三区| 亚洲Av高清一区二区三区| 激情内射日本一区二区三区| 国产精品美女一区二区| 国产伦精品一区二区三区女| 国产凹凸在线一区二区| 日韩精品一区二区三区不卡| 无码人妻精品一区二区蜜桃| 久久久一区二区三区|