动态改变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提供了类似的东西。