发新话题
打印

div自适应高度方法

div自适应高度方法

无意中看到一则关于div底部对齐的文章,延伸一下,修改成自适应高度,还没有真实应用,未知会否有其他问题

<style type="text/css">
        .aa{height:100%;width:100%;background:#ff0099;position:relative;font:12/24}
        .aa div{width:778px;}
        .bb{width:200px;background:ccc;height:100%;position: absolute;bottom:0;left:0px;}
        .cc{background:fdfdfd;height:100%;position: absolute;bottom:0;left:200px;}
</style>
<div class="aa">
        <div class="bb"><a href="####" target="_blank">left</a></div>
        <div class="cc">right</div>
</div>

TOP

height:100%这样的写法好像是不管用的哦……

TOP

/* CSS Document */
body {margin:0px; }
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative;width: 100%; }
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#flashcontent {margin: 0 auto; padding:18px 0 0 29px;position: relative; top: -50%;width: 800px; height:527px; /* for explorer only */
div.greenBorder {}

/* Html Document */
<div id="outer">
  <div id="middle">
    <div id="flashcontent" class="greenBorder">111111111111</div>
  </div>
</div>

TOP

发新话题