普通网友 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 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)（相关搜索：51单片机|单片机|测试代码）
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了，如何解决？(操作系统-ubuntu)