CSS jQuery 自动充满剩余高度

hhhh63

于 2023-09-09 10:56:57 发布

阅读量355

点赞数

文章标签：充满高度空间

本文链接：https://blog.csdn.net/hhhh63/article/details/132774405

版权

网页排版本实现画布canvas自动充满剩余的空间，网上提供的方法都是顶部固定，下面充满。这里的页面顶部是浮动的，用CSS没有办法实现，于是用jQuery实现这项功能。

<html style="height:100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="referrer" content="always">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <!--兼容手机不缩小-->
    <meta http-equiv="x-dns-prefetch-control" content="on">

</head>
<body style="height:calc(100% - 20px)">
    <img class="logo" src="Images/ghlogo240x160.png" alt="Logo" />
    <h1>智能AGV云平台</h1>
    <div class="menu">
        <a href="Real.html">运行图</a>
        <a href="Remote.html">遥控器</a>
        <a href="State.html">AGV状态</a>
        <a href="Log.html">日志</a>
    </div>

    <div class="split2"></div>

    <table class="logtable">
    </table>

    <div class="split2"></div>

    <div class="zhouqi">
        <div>周期：</div><div id="interval"></div>
        <div id="prompt"></div>
    </div>

    <div class="split"></div>
    <canvas class="ground"></canvas>
</body>
</html>

<script type="text/javascript">
        var onresize = function () {
            var height = $('body').height() - $(".split").offset().top - $('.split').height();
            $('.ground').height(height);
        }

        $(window).resize(onresize);
        //$(window).load(onresize);

    // 放放到最后才能正常显示（移动端）
    // $(window).load(onresize);不能正常显示
    onresize();
</script>

关键点：1、手机上显示不缩小，横屏不放大，<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
2、script 放天最后，否则手机显示不正常。