普通网友 2018-01-31 02:30 采纳率: 52.6%
浏览 1234
已采纳

div缺少一块，一直不懂为什么

代码在下面，点击黄色按钮，红色的框总是少一块，最外层div比刚开始的小，是为什么呢

 <!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
        <style type="text/css">

            * {
                margin: 0;
                padding: 0;
            }
            html,
            body {
                width: 100%;
                height: 100%;
            }

            .wrap {
                width: 100%;
                height: 100%;
            }


            .informationBar {
                width: 100%;
                height: 10%;
            }

            .OpenorClose {
                width: 100%;
                height: 100%;
                background: yellow;

            }

            .menu {
                width: 75px;
                height: 90%;
                float: left;
                background: #181f24;
            }

            .content {
                height: 90%;
                background: red;
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <div class="informationBar">
                <div class="OpenorClose">
                点击我

                </div>
            </div>
            <div class="menu"></div>
            <div class="content"></div>
            <div class="clear"></div>
        </div>
    </body>

</html>
<script type="text/javascript">
            $(".content").css("width", $(window).width() - $(".menu").width() + "px");

    var c = true;
    $(".OpenorClose").click(function() {
        if(c == true) {
            $(".menu").css("width", "183px");
            $(".content").css("width", $(window).width() - $(".menu").width() + "px");
            c = false;
        } else {
            $(".menu").css("width", "75px");
            $(".content").css("width", $(window).width() - $(".menu").width() + "px");
            c = true;
        }
    })
</script>
  • 写回答

5条回答 默认 最新

  • marywhiter 2018-01-31 03:13
    关注
             if(c == true) {
            console.log('-----------------c is true-----------');
            console.log(`window-- ${ $(window).width() } px`);
            $(".menu").css("width", "183px");
            // jquery 使用css的时候 会进行页面重绘，你把 .menu 设置为 183 的时候 页面相当于 content  已经被挤到下一行了，这个时候会出现滚动条
            // 所以 window 的宽度会出现变化，会把 滚动条的宽度去掉
            console.log(`menu -183px-- ${ $(".menu").width() } px`);
            console.log(`window-- ${ $(window).width() } px`);
            console.log(`true == c  ${ $(window).width() - $(".menu").width() } `);
            //可以把下面一行注释掉 看页面效果 就知道了
            $(".content").css("width", $(window).width() - $(".menu").width() + "px");

            / * 修改方案
            var menuW = 183;
            $(".content").css("width", $(window).width() - menuW + "px");
            $(".menu").css("width", menuW + "px");
            */
            c = false;
        }

    ![图片说明](https://img-ask.csdn.net/upload/201801/31/1517368398_756787.png)图片说明

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

悬赏问题

  • ¥50 opencv4nodejs 如何安装
  • ¥15 adb push异常 adb: error: 1409-byte write failed: Invalid argument
  • ¥15 nginx反向代理获取ip，java获取真实ip
  • ¥15 eda：门禁系统设计
  • ¥50 如何使用js去调用vscode-js-debugger的方法去调试网页
  • ¥15 376.1电表主站通信协议下发指令全被否认问题
  • ¥15 物体双站RCS和其组成阵列后的双站RCS关系验证
  • ¥15 复杂网络，变滞后传递熵，FDA
  • ¥20 csv格式数据集预处理及模型选择
  • ¥15 部分网页页面无法显示！