久久久久久久视色,久久电影免费精品,中文亚洲欧美乱码在线观看,在线免费播放AV片

<center id="vfaef"><input id="vfaef"><table id="vfaef"></table></input></center>

    <p id="vfaef"><kbd id="vfaef"></kbd></p>

    
    
    <pre id="vfaef"><u id="vfaef"></u></pre>

      <thead id="vfaef"><input id="vfaef"></input></thead>

    1. 站長資訊網(wǎng)
      最全最豐富的資訊網(wǎng)站

      CSS子元素跟父元素的高度一致的實現(xiàn)方法

      這篇文章主要介紹了CSS子元素跟父元素的高度一致的實現(xiàn)方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

      絕對定位方法:

      (1)將父元素設置為相對定位,不寫父元素的高度時,會隨著左邊的子元素高度變化而變化

      .parent {
      /*關(guān)鍵代碼*/
      position: relative;

      /*其他樣式*/
      width: 800px;
      color: #fff;
      font-family: “Microsoft Yahei”;
      text-align: center;
      }

      (2)左邊一個元素有個最小高度的情況

      .left {
      min-height: 700px;
      width: 600px;
      }

      (3)右邊元素要想跟父元素的高度是一致,那么可以用絕對定位這樣設置,如果不想同時寫top和bottom,寫一個時,再寫上height:100%,也可以達到一樣的效果

      .right {
      /*關(guān)鍵代碼*/
      width: 200px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;

      /*其他樣式*/
      background: #ccc;

      }

      (4)完整例子代碼:

      <!DOCTYPE html>
      <html >
      <head>
      <meta charset=”UTF-8″>
      <title>子元素高度與父元素一致</title>
      <style>

      .parent{
      position: relative;
      background: #f89;

      width: 800px;
      color: #fff;
      font-family: “Microsoft Yahei”;
      text-align: center;
      }
      .left {
      min-height: 700px;
      width: 600px;

      }
      .right {
      width: 200px;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;

      background: #ccc;

      }
      </style>
      </head>
      <body>
      <div class=”parent”>
      <div class=”left”>
      左側(cè) left 不定高,parent的高度隨著左側(cè)left 的高度變化而變化,右側(cè)也跟著變
      </div>
      <div class=”right”>
      這邊的高度跟父元素高度一致
      </div>
      </div>
      </body>
      </html>

       

      左側(cè) left 不定高,parent的高度隨著左側(cè)left 的高度變化而變化,右側(cè)也跟著變

      這邊的高度跟父元素高度一致

      (5)效果

      CSS子元素跟父元素的高度一致的實現(xiàn)方法

      (6)問題來了:

      如果右側(cè)的子元素高度超出了.parent,怎么辦?

      right的子元素,高度為1024px,會撐破容器,給.right加上 overflow:auto 就防止溢出了

      .right-inner {
      background: limegreen;
      height: 1024px;
      }

      效果圖如下:

      CSS子元素跟父元素的高度一致的實現(xiàn)方法

      完整代碼:

      <!DOCTYPE html>
      <html >
      <head>
      <meta charset=”UTF-8″>
      <title>子元素高度與父元素一致</title>
      <style>

      .parent{
      position: relative;
      background: #f89;

      width: 800px;
      color: #fff;
      font-family: “Microsoft Yahei”;
      text-align: center;
      }
      .left {
      min-height: 700px;
      width: 600px;

      }
      .right {
      width: 200px;
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;

      overflow: auto;

      background: #ccc;

      }
      .right-inner {
      background: limegreen;
      height: 1024px;
      }
      </style>
      </head>
      <body>
      <div class=”parent”>
      <div class=”left”>
      左側(cè) left 不定高,parent的高度隨著左側(cè)left 的高度變化而變化,右側(cè)也跟著變
      </div>
      <div class=”right”>
      <div class=”right-inner”>right的子元素,高度為1024px,會撐破容器,給.right加上 overflow:auto 就防止溢出了</div>
      </div>
      </div>
      </body>
      </html>

      左側(cè) left 不定高,parent的高度隨著左側(cè)left 的高度變化而變化,右側(cè)也跟著變

      right的子元素,高度為1024px,會撐破容器,給.right加上 overflow:auto 就防止溢出了

      (7)其他資源

      http://stackoverflow.com/questions/3049783/how-to-make-a-floated-div-100-height-of-its-parent

      文章來源:腳本之家,原文鏈接:https://www.jb51.net/css/743410.html

      CSS子元素跟父元素的高度一致的實現(xiàn)方法

      申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

      贊(0)
      分享到: 更多 (0)
      網(wǎng)站地圖   滬ICP備18035694號-2    滬公網(wǎng)安備31011702889846號