为什么这个css代码会在桌面视图中关闭内容？

Question

（背景资料） 我的任务是修复以前的同事文件（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;
}

如果您查看测试页面，您会发现它会影响内容，如果您将页面调整为平板电脑或更小的视图，则可以查看更多＆＃34;按钮出现，当您单击它时，将显示其余内容。

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

所以我得出的结论是＆＃34; max-height＆＃34;功能是必要的（我认为），但我可以做些什么来允许桌面视图中的内容？如果我增加最大高度以适应所有这些，问题是当我们向该测试页面添加更多内容时，我们会回到相同的情况。

我真的希望有人能就此提出建议。

顺便说一句，这个视图的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();
        });
    });
});

Answer 1

我这部分代码，你在IF STATEMENT中打开括号之前有一个注释。如果这是注释，则max-height：300px永远不会被识别为执行。

变化：

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

要：

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

Answer 2

为什么此css代码会在桌面视图中关闭内容？

因为您的最大高度设置为300px，并且该浏览器宽度的内容超过300px，所以它是＆＃34;切割＆＃34;内容关闭。

删除它，然后使用媒体查询。

.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;
        }
    }

fiddle