為什么這個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;
        }
    }

小提琴