zoukankan      html  css  js  c++  java
  • jQuery实现左右div自适应高度完全相同

      最近做前端设计时需要使左右两个DIV高度自适应。

    View Code
    <!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>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>左右DIV高度自适应</title>
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
            <script type="text/javascript">
                function $(id) {
                    return document.getElementById(id)
                }
                function getHeight() {
                    if ($("left").clientHeight >= $("right").clientHeight) {
                        $("right").style.height = $("left").clientHeight + "px";
                    } else {
                        $("left").style.height = $("right").clientHeight + "px";
                    }
                }
                window.onload = function() {
                    getHeight();
                }
            </script>
            <style type="text/css">
                #left { height: auto; width: 300px; float: left; border: solid 1px #000;}
                #right { height: auto; width: 300px; margin-left: 302px; border: solid 1px #000; }
            </style>
        </head>
        <body>
            <h3>
                左右DIV高度自适应
            </h3>
            <div id="left">
                我是左DIV。
            </div>
            <div id="right">
                <p>我是右DIV,</p>
                <p>我的内容比左多。</p>
            </div>
        </body>
    </html>

      这其中的jquery代码中的获得高度用的clientHeight,介绍一下几种不同的获得方式以及他们的差别。

      这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。

      clientHeight

      大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。

      offsetHeight

      IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。

      NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。

      scrollHeight

      IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。

      NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。

      简单地说

      clientHeight 就是透过浏览器看内容的这个区域高度。

      NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight 时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。

      IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。

      同理

      clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可。

      说明

      以上基于 DTD HTML 4.01 Transitional,如果是 DTD XHTML 1.0 Transitional 则意义又会不同,在 XHTML 中这三个值都是同一个值,都表示内容的实际高度。新版本的浏览器大多支持根据页面指定的 DOCTYPE 来启用不同的解释器。下载或浏览测试文件。

      关系公式:scrollHeight = offsetHeight+ scrollTop

      ps:介绍摘自百度百科

  • 相关阅读:
    107. Binary Tree Level Order Traversal II
    108. Convert Sorted Array to Binary Search Tree
    111. Minimum Depth of Binary Tree
    49. Group Anagrams
    使用MALTAB标定实践记录
    442. Find All Duplicates in an Array
    522. Longest Uncommon Subsequence II
    354. Russian Doll Envelopes
    opencv 小任务3 灰度直方图
    opencv 小任务2 灰度
  • 原文地址:https://www.cnblogs.com/zxlovenet/p/2627534.html
Copyright © 2011-2022 走看看