Question

在我的项目中，我有这个<div>，它通过jquery函数接收从几个页面读取的内容并将它们显示为一个弹出窗口：

<div id="popup">
    <div id="header"> <span id="title"></span> <span id="button">X</span> </div>
    <div id="text"> </div>
</div>

与此相关的css如下：

#popup {
    border-style: solid;
    border-color: #E0E0E0;
    box-shadow: 2px 2px 2px black;
    width: 1000px;
    height: 900px;
    max-width: 1500px;
    max-height: 1000px;
}

#header {
    background-color: #66B2FF; 
}

#title {
    text-decoration-color: #E0E0E0;
    font: 28px arial;
}

#button {
    background-color: #99CCFF;
    min-width: 32px;
    max-width: 5%;
    min-height: 32px;
    max-height: 100%;
    position:absolute;
    right:0px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
}

#text {
    background-color: #FFFFFF;
    border-style: solid;
    border-color: #E0E0E0;
    text-decoration-color: #E0E0E0;
    font: 24px sans-serif;
    overflow: auto;
}

.ui-resizable-handle {
    width: 5px;
    height: 5px;
    background-color: red;
}

并通过此jquery代码将内容附加到此<div>中：

<script>
$('document').ready(function(){
    $('#popup').draggable({
        cointainment: "#container"
    });

    $('#popup').resizable({
        cointainment: "#container"
    });

    $('#popup').hide();

    $('#button').click(function(){
        $('#popup').hide();
    });

    $('a').click(function(e){
        if($(this).attr('href') != '<c:out value="${pageContext.request.contextPath}/acesso/logout.html"/>') {
            e.preventDefault();
            $.get($(this).attr('href'), function(data){
                var $temp  = $('<div/>', {html:data});
                $('#title').text($temp.find('title').text());
                $('#text').html($temp.remove('head').html());
                $('#popup').show();
            });
        }
    });
});
</script>

我的问题是附加到<div>的内容显示了弹出窗口的边界，如下所示：

有人知道如何解决这个问题吗？

更新

css文件的新代码：

#popup {
    border-style: solid;
    border-color: #E0E0E0;
    box-shadow: 2px 2px 2px black;
    max-width: 85%;
    max-height: 85%;
}

.ui-resizable-handle {
    width: 5px;
    height: 5px;
    background-color: red;
}

#header {
    background-color: #66B2FF; 
}

#title {
    text-decoration-color: #E0E0E0;
    font: 28px arial;
}

#button {
    background-color: #99CCFF;
    min-width: 32px;
    max-width: 5%;
    min-height: 32px;
    max-height: 100%;
    position:absolute;
    right:0px;
    text-align:center;
    padding-left:10px;
    padding-right:10px;
}

#text {
    overflow: scroll-y;
}

Answer 1

这取决于你想要如何解决它：

制作弹出式滚动条：
```
#popup {

    overflow:scroll-y;

}
```
理想的做法是让弹出窗口适合内容。但问题是，该大小取决于弹出窗口内生成的内容。如果它是可预测的，也许你可以定义一些样式来强制geerated东西使用相对（％）大小，在这种情况下你的问题就解决了。我的意思是，有点：
```
#popup {
  position:relative;
  display:block; 
}

#popup > div  {

  width: 100% !important;
  height: 100% !important;
}
```
如果在#popup里面有一个div与其他内容一起使用，这将有效。找出里面的东西，使其符合您的需求。您可以使用!important标记覆盖样式。
另一方面，如果你真的不知道弹出内容会是什么，或者每次都不同，你可以通过javascript检测内部的大小，并调整{{1因此。查看DOM元素的#popup和clientHeight属性。

在具有有限大小的<div>中添加内容</div>

1 个答案: