为什么这个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;
}

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

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

所以我得出结论，“max-height”功能是必要的（我认为），但是我能做些什么才能让桌面视图中的内容出现？ 如果我增加最大高度以适应所有这些，问题是当我们向该测试页面添加更多内容时，我们将在相同的情况下返回。

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

顺便说一句，这个视图的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高，因此它会“切断”内容。

删除它，并使用媒体查询。

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

小提琴