根据内容动态更改div的高度

Question

因此，我试图建立一个网站，并在单击某些内容后出现一个弹出窗口/框DIV。 根据我网站的设计，此弹出DIV包含文本/内容，我们将其命名为“位置”。 此位置弹出窗口DIV具有固定的高度和宽度，因此，我创建了一个垂直滚动条以向下滚动并阅读文本。 我想向此弹出窗口添加更多内容，但不幸的是，文本已被截断，并且滚动不会继续向下滚动。 我为DIV中的边距/填充设置了一个非常大的值，以使其在很长的页面长度内都可以工作，但是它效率很低且编程效果很差。

如何使用JavaScript或CSS将div的样式设置为整个HTML文档的高度（此处是动态变化的因素），以便能够智能，正确地进行此操作？ 我不想手动执行此操作，因为如果我选择HTML文档，则时间会更长，因此，我总是必须返回并更改CSS中的margin / padding值或对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
                    }
                );
            });

这是我保存的屏幕截图，用于更好地了解我在说什么（在截取文本的弹出窗口底部）：

我的网站截图

到目前为止，每个人都可以在以下位置查看我的工作：www.zaheeruddinsyed.com，以准确了解我在说什么。

Answer 1

我相信您正在寻找overflow: auto属性。 看看这个小提琴 。

如果要像样图一样实现滚动条，则必须使用CSS， 这里是有关如何将自定义样式应用于滚动条的教程。

顺便说一句，如果您想创建弹出窗口，则可能需要查看Fancybox ，在我看来，它看起来确实不错，并且大部分工作已经完成！ 唯一的缺点可能是您必须将它与jQuery一起使用，但是今天大多数网页已经使用了它。

---

编辑

查看页面源代码后，不到一分钟的时间便发现了问题。 弹出div的内容没有滚动到底部，由于某种原因它停止了。

这个问题是相似的： 使用溢出功能截断底部内容：自动； 和jscrollpane

尝试将以下代码放入JavaScript控制台（ Ctrl + Shift +（Chrome中的J ，Firefox中的K ）：

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

它向下滚动到应有的底部。 我知道这还不能解决您的问题，但是我想我已经找到了解决方案（我不确定，因为我自己无法测试）。 但是，如果您看到另一个问题，则解决方案将使用autoReinitialise:true 。 您可以通过在JavaScript控制台中运行以下代码立即尝试：

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

当然，如果您希望每次刷新页面时都能正常工作，则必须将其放在初始化jScrollPane的文件中。

为什么在$(document).ready(function()...)有2个$(document).ready(function()...)和2个$(function()... （相同）定义？您应该将所有代码放在一个函数中，它会在加载DOM时被调用。为了用户UX的缘故，请尝试减少图像和文件，并避免使用数百万个不同的js插件，这花了我大约11秒钟的时间（根据网络分析器）第一次加载时，我有100Mb / s的上行链路，我无法想象有人使用移动互联网。该网页发出了100多个请求，其中很多是1x1px png。如果确实需要，那么您可能想要可以考虑压缩和捆绑，这取决于您将使用的后端框架。我可以说ASP.NET MVC 4提供了非常简单的捆绑管理器，但是我确定PHP或rails提供了类似的东西。