javascript - 为什么此 CSS 代码会在桌面 View 中 chop 内容？

Question

(背景信息)我的任务是修复前同事的文档(html/css/js)。我无法访问所有 html 文档，也没有任何 javascript，因为有人认为从不同区域的不同分支引用一堆文档是个好主意，并且与我部门中的任何人具有不同的权限级别，所以很多需要跳过的慢圈。虽然我已经等了几周他们给我发电子邮件或允许我进入他们的分支机构，但我必须用我所拥有的东西来偿还。这些网站由 CMS 维护

我遇到了页面内容在桌面 View 中消失但在移动 View 中消失的问题。直接影响这个的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;
}

如果您查看测试页面，您会发现它会影响内容，如果您将页面大小调整到大约平板电脑或更小的 View ，则会出现“查看更多”按钮，当您单击它时，会出现其余内容.

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

所以我得出的结论是“最大高度”功能是必要的(我认为)，但是我该怎么做才能让桌面 View 中的内容出现呢？如果我增加最大高度以适应所有内容，问题是当我们向该测试页面添加更多内容时，我们将回到相同的情况。

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

顺便说一句，这是查看更多/更少的 javascript 代码，我在 chrome 上检查网页时发现了它，哈哈。

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

为什么此 CSS 代码会在桌面 View 中 chop 内容？

因为您的最大高度设置为 300 像素，并且内容在该浏览器宽度下的高度超过 300 像素，因此它会“剪切”内容。

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

.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