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%)
同样的高度？
make all max-width =＆gt; 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;
}

Answer 2

您使用的是身高和宽度的百分比。

浏览器在调整大小时更改其大小，因此百分比的值会折旧。例如，10％的100px与10px的10％不同。

使用px在调整大小时保持高度和宽度相同。当然，取决于你想要什么，也不比其他更好

在浏览器调整大小时弹出div闪烁

HTML

CSS

2 个答案: