关键字‘技巧’的相关文章

JavaScript日历控件

由于项目需要，写了个日历控件，仿照windows的日历写的，可以添加备忘录，备忘录操作所存取数据，没有数据库的支持，只在js中建立一个数组来存储，故而在不刷新页面的情况下，可以进行添加查看备忘录操作，如需和服务器进行交互，使用ajax也十分的方便！

点击查看应用

JavaScript日历控件

标签：, , 发布在 javascript | 没有评论 »

再谈DIV的高度自适应

关于div高度的自适应，一直是个让人头疼的问题，整理了一下以前总结的方法，仅表示我也玩过。

再谈DIV的高度自适应

html code:

  1. <div id="container">
  2. 　　<div id="leftSide">这边的高度自适应右侧的高度</div>
  3. 　　<div id="rightSide">
  4. 　　　　<script type="text/javascript">
  5. 　　　　　　for(i=0;i<10;i++){
  6. 　　　　　　　　document.write(i + '<br>');
  7. 　　　　　　}
  8. 　　　　</script>
  9. 　　</div>
  10. </div>

可用的方法大概有以下四种：

1，用absolute设置一个足够高的高度，在父级元素中清除溢出的部分,具体的css code如下：

  1. #container{ font-size:14px; width:300px; overflow:hidden; border:3px solid blue; margin:10px auto 0; color:#fff; position:relative;}
  2. #leftSide{ width:100px; float:left; height:200000px; left:0; top:0; position:absolute; background:gray;}
  3. #rightSide{ width:190px; float:right; text-align:center; background:purple;}

其实这种方法并没有真正的实现左右两个div等高，只是用了障眼法，利用container的overflow:hidden清除了左侧多余的部分，以达到视觉上左右等高的目的，虽然有“白猫黑猫，逮着老鼠就是好猫”的说法，但是笔者并不着重推荐这种方法，因为给父级元素添加relative，会带来很多不必要的麻烦，况且只能是设置absolute的一侧自适应另一侧的高度，并不能让两侧中任一侧去自由去适应另一侧！

2，负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合

  1. #container{ font-size:14px; width:300px; overflow:hidden; border:3px solid blue; margin:10px auto 0; color:#fff;}
  2. #leftSide{ width:100px; float:left; background:gray; padding-bottom:9999px; margin-bottom:-9999px;}
  3. #rightSide{ width:190px; float:right; text-align:center; background:purple; padding-bottom:9999px; margin-bottom:-9999px;}

3，利用javascript脚本实现动态设置高度

  1. <script type="text/javascript">
  2. 　　var left = document.getElementById('leftSide');
  3. 　　var right = document.getElementById('rightSide');
  4. 　　if(left.offsetHeight>=right.offsetHeight){
  5. 　　　　right.style.height = left.offsetHeight + 'px';
  6. 　　}else{
  7. 　　　　left.style.height = right.offsetHeight + 'px';
  8. 　　}
  9. </script>

事实上，这种办法真正意义上实现了两侧等高，并且能让两侧中任一侧去自由去适应另一侧，但是其缺点就在于，只有当DOM加载完成后，才有会这样等高的效果，如果网速够快，这个漏洞可以忽略不计。

4，在父级元素中填充背景，css code如下：

  1. #container{ font-size:14px; width:300px; overflow:hidden; border:3px solid blue; margin:10px auto 0; color:#fff; background:url(http://www.men-ideal.com/images/unit1030.jpg) repeat-y; }
  2. #leftSide{ width:100px; float:left; }
  3. #rightSide{ width:190px; float:right; text-align:center}

目前，这种方法是最流行的，同样也是一种“欺骗性”的解决办法，不过除了多使用一张图片之外，都可以堪称完美，这也是笔者极力推荐的！

标签：, 发布在 html+css | 2 条评论 »