Javascript 为什么这个css代码会切断桌面视图中的内容？

（背景资料） 我的任务是修复以前同事的文档（html/css/js）。我无法访问所有的html文档，也无法访问任何javascript，因为有人认为引用来自不同地区、不同权限级别的不同分支机构的一堆文档是一个好主意，因为我所在部门的任何人都不具备这样的权限级别，所以需要进行大量缓慢的操作。我已经等了好几个星期，等他们给我发电子邮件或允许我进入他们的分支机构，但我必须用我所拥有的来偿还。网站由CMS维护

我遇到了一个问题，页面内容在桌面视图中消失，但在移动视图中消失。直接影响这一点的css代码如下：

    .mobile div.tr-page-container #entry_page_custom_html{
    max-height: 300px;
} 

这些也在与div.tr-page-container相关的CSS文档中：

div.tr-page-container {
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}

div.tr-page-container {

    border-radius:0;
}

div.tr-page-container div.header-container {
    background-color: none;
}

div.tr-page-container div.section-sub-header, #login-div-content .footer-block, div.registration-page-container div.section-sub-header {
    display:none;
}

如果您查看测试页面，您将看到它会影响内容，如果您将页面调整为“关于平板电脑”或更小的视图，则会出现“查看更多”按钮，单击该按钮时，会显示其余内容

如果删除此代码，内容将显示在桌面视图中，但在移动视图中，“查看更多”按钮覆盖了整个内容，导致您必须实际单击它才能阅读任何内容（请参见屏幕截图）

所以我得出结论，“最大高度”功能是必要的（我认为），但是我能做些什么来允许桌面视图中的内容出现呢？如果我增加“最大高度”以适应所有测试，问题是当我们向测试页面添加更多内容时，我们将回到相同的情况

我真的希望有人能在这方面给我建议

顺便说一下，这是视图的javascript代码，我在chrome lol上查看网页时发现的

Y.use('jquery-ui',function(Y) {
    jQuery(function() {
        jQuery('.view-content-link').click(function() {
            jQuery('#entry_page_custom_html').toggleClass('expand');
                jQuery('.view-content-link').toggle();
        });
    });
});

---

在这部分代码中，在IF语句中打开括号之前，您有一条注释。如果这是注释，那么max height:300px永远不会被识别为执行

更改：

.mobile div.tr-page-container #entry_page_custom_html{
    max-height: 300px;
} 

致：

---

在这部分代码中，在IF语句中打开括号之前，您有一条注释。如果这是注释，那么max height:300px永远不会被识别为执行

更改：

.mobile div.tr-page-container #entry_page_custom_html{
    max-height: 300px;
} 

致：

---

为什么此css代码会切断桌面视图中的内容？

因为您的最大高度设置为300px，并且在该浏览器宽度下内容的高度超过300px，所以它正在“剪切”内容

删除此项，然后使用媒体查询

.mobile div.tr-page-container #entry_page_custom_html{
    max-height: 300px; //not needed

}

将此添加到脚本中

$('.view-content-link').on('click', function(e) {
      $('.table').toggleClass("show"); 
      e.preventDefault();
    });

将此添加到css中

.show{
     display: block !important;
   }

    @media screen and (max-width: 767px) {
        .table{
            display:none;
        }
    }

---

为什么此css代码会切断桌面视图中的内容？

因为您的最大高度设置为300px，并且在该浏览器宽度下内容的高度超过300px，所以它正在“剪切”内容

删除此项，然后使用媒体查询

.mobile div.tr-page-container #entry_page_custom_html{
    max-height: 300px; //not needed

}

将此添加到脚本中

$('.view-content-link').on('click', function(e) {
      $('.table').toggleClass("show"); 
      e.preventDefault();
    });

将此添加到css中

.show{
     display: block !important;
   }

    @media screen and (max-width: 767px) {
        .table{
            display:none;
        }
    }

---

删除注释#entry#u page_custom_html，因为它隐藏了IF语句的开括号{删除注释#entry#u page_custom_html，因为它隐藏了IF语句的开括号{谢谢你的帮助！如果我将这个脚本添加到一个新的.js文档中并从标题调用它，它会与其他的.js文档冲突吗？因为我无法访问.js或直接调用视图more/less的html文件。这些家伙是如何设置的，并期望我修复它的，这真是令人难以置信，所以你没有访问html？！…它可能会“冲突”，但应该仍然有效，因为两个脚本都在“尝试”做同样的事情。非常感谢！没有atm，我没有直接访问html文档的权限，就像Web Coordinator lol一样有趣。它通过CMS使用页面包装器，它引用来自不同分支的所有内容，我没有权限访问该分支服务器内的文档，也没有其他人他们似乎不在乎，我已经等了两个星期，等待他们把文件发送过来。唯一好的一面是我的老板理解，没有因为这些废话设定任何期限。再次感谢你的帮助，我会尝试一下。谢谢你的帮助！如果我将此脚本添加到一个新的.js文档中，并从标题调用它，会吗与其他.js文档冲突？因为我无法访问调用“更多/更少视图”的.js或direct html文件。这些人如何设置并期望我修复它，这真是令人难以置信，所以你无法访问html？！…这可能会“冲突”，但应该仍然可以工作，因为两个脚本都在“尝试”做同样的事情。非常感谢！没有atm，我没有直接访问html文档的权限，就像Web Coordinator lol一样有趣。它通过CMS使用页面包装器，它引用来自不同分支的所有内容，我没有权限访问该分支服务器内的文档，也没有其他人他们似乎不在乎，我已经等了两个星期，等他们把文件寄过来。唯一好的一面是我的老板理解，没有因为这些废话设定任何期限。再次感谢你的帮助，我会尝试一下。