javascript - 弹出 div 在浏览器调整大小时收缩

Question

我有一个弹出窗口，它会缩小，内容会在浏览器窗口调整大小时错位。我被这个困住了

这是 fiddle :http://jsfiddle.net/sarathsprakash/ZjdU4/

这里是全屏 fiddle :http://jsfiddle.net/sarathsprakash/ZjdU4/show/

也许您可以查看并检查调整窗口大小

HTML

<div id="popup" >

 <div id="img-section" >
        <img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
        </div>
    <div id="description">
     //text content
    </div>

</div>
<div id="fade" class="black_overlay"></div>
<a href="#"> click here</a>

CSS

.black_overlay {
     display: none;
     position: absolute;
     top: 0%;
     left: 0%;
     min-width: 100%;
     min-height: 100%;
     background-color: black;
     z-index:1001;
     -moz-opacity: 0.8;
     opacity:.80;
     filter: alpha(opacity=80);
 }
 #popup {
     display: none;
     position: fixed;
     top: 8%;
     left: 10%;
     max-width:1200px;
     max-height:600px;
     height:auto;
     width:auto;
     padding: 16px;
     background-color: white;
     z-index:1002;
     overflow:hidden;

  }
 #img-section {
     position:relative;
     width:800px;
     float:left;
     background:black;
     cursor:pointer;
     height:600px;
     padding:5px;
     margin-top: -20px;
     margin-left: -15px;
     margin-right: 10px;

 }
 #description {
     position:relative;
     background-color: #fff;
     max-width:400px;
     overflow-y: auto;
     position: relative;
     word-wrap: break-word;
     max-height:600px;
     height:auto;
     padding: 20px;

 }
 #img-section > img {
     display:inline-block;
     height: auto;
     vertical-align:middle;
     width:auto;
 }

我希望 poup 保持原样，它不应该缩小

提前致谢

Answer 1

弹出窗口的横向滚动很糟糕，但是:

• 使弹出position: absolute而不是fixed
• 给正文一个 min-width 左边距 + 弹出窗口宽度(目前是 calc(1200px + 10%)
• 高度也一样吗？
• 让所有的max-width => width，因为你知道你有多少空间

您现有的 CSS 非常奇怪，但可以这样做:http://jsfiddle.net/rudiedirkx/ZjdU4/1/

亮点:

body {
    min-width: calc(1200px + 10%);
}
.black_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#popup, #popup * {
    box-sizing: border-box;
}
#popup {
    position: absolute;
    width: 1200px;
    height: 600px;
    padding: 0;
}