css - 不需要时调整弹出窗口宽度

Question

所以我在我的主页上有这个东西弹出窗口，我填充了一些内容。我遇到的问题是它正在提前调整大小。

我不希望弹出窗口在变大以供窗口处理之前调整大小。 我该如何解决这个问题？研究了一段时间，想不通。

您可以在 jsiffle url 中尝试一下，调整预览窗口的宽度，您会发现它甚至在需要之前就缩小了。

http://jsfiddle.net/82gvnamL/

CSS:

#popup {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.75);
    z-index: 2;
}
#popup #loading {
    height: 32px;
    width: 32px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: url('../img/ajax-loading.gif') no-repeat;
    background-size: 32px 32px;
    display: inline-block;
}
#popup #container {
    max-width: 95%;
    max-height: 95%;
    padding: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background: #111;

    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
}
#popup #content {
    width: 100%;
    font-family: 'Oxygen', sans-serif;
    font-size: 12px;
    color: #ccc;
    text-align: left;
    line-height: 16px;
}

#popup #close {
    width: 20px;
    height: 16px;
    padding: 4px 0 0 0;
    border: 1px solid #333;
    border-radius: 50%;
    float: right;
    background: #222;
    position: absolute;
    top: -7px;
    right: -7px;

    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    text-align: center;
    color: #fff;
    line-height: 12px;

    cursor: pointer;
}
#popup #close:before {
    content: 'X';
}

HTML:

<div id="popup">
    <div id="container">
        <div id="close"></div>
        <div id="content">
            <p>Very long string in here that should not get cut off until window width is too small. If you understand what I'm saying.</p>
        </div>
    </div>
</div>

Answer 1

尝试像这样改变容器的宽度"

#popup #container { 最大宽度:255px； 宽度:75%； }

因此在较大的屏幕上它将固定为 255 像素的宽度，而在较小的屏幕上它将缩小到 75% 宽度。