動態改變div的高度基於內容

Question

所以我想做一個網站，並有一些點擊後會出現一個彈出式窗口/盒DIV。這個彈出的DIV包含文本/內容，根據我的網站設計，我們將其命名爲「位置」。此位置Popup DIV具有固定的高度和寬度，因此，我創建了一個垂直滾動條來向下滾動並閱讀文本。我想添加更多的內容到這個彈出窗口，但不幸的是，文本被截斷，並且滾動不能繼續向下滾動。我已經爲DIV中的邊距/填充設置了一個非常大的值，以使這個頁面的頁面長度很長，但是效率非常低，編程也很糟糕。

我怎麼能一個div的樣式設置爲總的HTML文件（這是dyanamic，在這裏改變的因素）使用JavaScript或CSS，所以我可以智能地和正確地做到這一點的高度？我不希望有手工做，因爲時間越長，HTML文檔變成如果讓我選擇，我會永遠要回去，要麼在CSS改變保證金/填充值或做一些事情給JavaScript。

下面是它的CSS：

/* Pop Up */ 
#popupAbout, #popupLocations, #popupContact, #popupBlog { 
    height: 600px; 
    width: 900px; 
    overflow: scroll; 
    background-color: rgba(0, 0, 0, 0.75); 
    border: 2px solid #cecece; 
    z-index: 15; 
    padding: 20px; 
    color: #FFF; 
    -webkit-box-shadow: 0px 0px 4px #000 inset; 
    -moz-box-shadow: 0px 0px 4px #000 inset; 
    box-shadow: 0px 0px 4px #000 inset; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    -o-border-radius: 10px; 
    -ms-border-radius: 10px; 
    -khtml-border-radius: 10px; 
    border-radius: 10px; 
    margin-top: -50px; 
    visibility: hidden; 
} 

#popupAbout p, #popupLocations p, #popupContact p, #popupBlog p { 
    padding-left: 10px; 
    font-size: 18px; 
    line-height: 20px; 
} 
#popupAbout h1, #popupLocations h1, #popupContact h1, #popupBlog h1 { 
    text-align: left; 
    font-size: 30px; 
    letter-spacing: 1px; 
    border-bottom: 1px dotted #D3D3D3; 
    padding-bottom: 2px; 
    margin-bottom: 20px; 
} 
#popupAboutClose, #popupLocationsClose, #popupContactClose, #popupBlogClose { 
    right: 6px; 
    top: 6px; 
    position: absolute; 
    display: block; 
} 

及相應的JavaScript：

//Locations Page Pop Up 
      var popupLocationsStatus = 0; 

      function loadPopupLocations(){ 
       if(popupLocationsStatus==0){ 
        $("#popupLocations").fadeIn("slow"); 
        popupLocationsStatus = 1; 
       } 
      } 

      function disablePopupLocations(){ 
       if(popupLocationsStatus==1){ 
        $("#popupLocations").fadeOut("slow"); 
        popupLocationsStatus = 0; 
       } 
      } 

      function centerPopupLocations(){ 
       var windowWidth = document.documentElement.clientWidth; 
       var windowHeight = document.documentElement.clientHeight; 
       var popupLocationsHeight = $("#popupLocations").height(); 
       var popupLocationsWidth = $("#popupLocations").width(); 
       $("#popupLocations").css({ 
        "position": "absolute", 
        "top": windowHeight/2-popupLocationsHeight/2, 
        "left": windowWidth/2-popupLocationsWidth/2 
       }); 
      } 


      $(document).ready(function(){ 
       $("#popupLocations").fadeOut(); 
       popupLocationsStatus = 0; 
       $("#Locations").click(function(){ 
       $("#popupLocations").css({ 
        "visibility": "visible" }); 
        disablePopupAbout(); 
        disablePopupContact();     
        centerPopupLocations(); 
        loadPopupLocations(); 
       }); 
       $("#popupLocationsClose").click(function(){ 
        disablePopupLocations(); 
       }); 
      }); 
      $(function() 
      { 
       $('#popupLocations').jScrollPane(); 
       $('.popupLocations').jScrollPane(
        { 
         showArrows: true, 
         horizontalGutter: 10 
        } 
       ); 
      }); 

下面是我積攢給什麼我講的完全是一個更好看截圖（查看文本被截斷的彈出窗口的底部）：

My Website Screenshot

每個人都可能在迄今爲止觀看我的作品：www.zaheeruddinsyed.com，看到什麼我談論。

Answer 1

我相信你正在尋找overflow: auto財產。看看這個fiddle。

如果你想在樣例圖像上實現滾動條，你必須玩弄CSS，here是關於如何將自定義樣式應用於滾動條的教程。

順便說一句，如果你想使彈出窗口，你可能想看看Fancybox，在我看來，這看起來非常好，大部分工作已經完成！唯一的缺點可能是你必須使用它與jQuery，但它已經在今天的大多數網頁上使用。

---

編輯

當我看着頁面的源代碼，我發現這個問題在不到一分鐘。您的彈出div的內容不滾動到底部，它由於某種原因停止。

這個問題是相似的：Bottom content cutoff using overflow: auto; and jscrollpane

嘗試，並把這個代碼在JavaScript控制檯（按Ctrl + 移 +（Ĵ在Chrome中，ķ在Firefox）：

$("#popupLocations .jspPane").css("top","-800px") 

它滾動到它應該在的底部。我知道這還不能解決你的問題，但我想我找到了一個解決方案（我不確定，因爲我無法自己測試它）。但是如果你看看另一個問題，解決方案是使用autoReinitialise:true。您可以通過在JavaScript控制檯運行這個馬上嘗試：

$('.popupLocations').jScrollPane({ 
         showArrows: true, 
         horizontalGutter: 10, 
         autoReinitialise:true 
        } 
       ); 

當然，你必須把它放在你的文件，你正在初始化JScrollPane的，如果你想讓它正確每次刷新的時間工作頁。

爲什麼你在文件中有2 $(document).ready(function()...)和2 $(function()...（這是相同的）定義？你應該把所有的代碼放在一個函數中，這個函數會在DOM加載時調用。爲了您的用戶用戶體驗，儘量減少圖像和文件，並儘量避免使用數百萬個不同的js插件。我花了將近11秒（根據網絡分析器）第一次加載，我有100Mb/s上行鏈路，我無法想象有人使用移動互聯網。該網頁提出了超過100個請求，其中很多是1x1px png。如果所有這些都是非常必要的，那麼您可能需要考慮壓縮和捆綁。這取決於你將使用的後端框架。我可以說ASP.NET MVC 4提供了非常簡單的bundle manager，但我確信PHP或rails提供了類似的東西。