普通网友 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条)

报告相同问题？

悬赏问题

  • ¥15 lammps拉伸应力应变曲线分析
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟，应力应变曲线问题
  • ¥30 python代码，帮调试
  • ¥15 #MATLAB仿真#车辆换道路径规划
  • ¥15 java 操作 elasticsearch 8.1 实现 索引的重建
  • ¥15 数据可视化Python