javascript 实现两列高度自适应

最新推荐文章于 2024-06-25 10:18:33 发布

perl2023

最新推荐文章于 2024-06-25 10:18:33 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 网页制作文章标签： javascript div html float

本文链接：https://blog.youkuaiyun.com/greenerycn/article/details/1674031

网页制作同时被 2 个专栏收录

21 篇文章

订阅专栏

javascript

8 篇文章

订阅专栏

本文介绍了一种使网页设计中两个层高度自适应的方法，通过JavaScript获取右侧层的高度并将其赋值给左侧层，实现了两栏内容高度一致的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网页设计中,如何让两个层的高度由内容自适应一直是比较麻烦的事情.以前在蓝色理想上看到用外层将超出部分隐藏掉的方法来实现自适应,可是我的层有边框,这个就不行了.试了几天,终于找到一个比较不错的方法.

html代码如下:

<!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> new document </title>
  <style type="text/css">
   #left{
   float:left;
    width:100px;
    height:100px;
    background:#eee

  }
  #dd{
  float:right;
  height:300px;
  width:100px;
  background:#ccc
  }

  </style>

  </head>

<body>
<div  id="left">

</div>
<div id="dd">

</div>
<script type="text/javascript">
  var a=document.getElementById("dd").clientHeight;
document.getElementById("left").style.height=a;

  </script>
</body>
</html>

效果如下: