【问题标题】:Modal resizes dynamically, but other divs don't move with it模态动态调整大小,但其他 div 不随它移动
【发布时间】:2013-09-13 00:27:58
【问题描述】:

我不确定我的标题措辞是否正确。

我有一个小提琴here...

<div> 中的内容强制调整大小时,“我已阅读此消息”按钮不会随之移动。我将<div> 的高度设置为auto,所以我不确定还有什么...

这是模态窗口的 CSS...

.reveal-modal {
    visibility: hidden;
    top: 100px; 
    left: 43%;
    margin-left: -360px;
    width: 700px;
    height: auto;
    background: #eee url(../images/modal-gloss.png) no-repeat -200px -80px;
    position: absolute;
    z-index: 101;
    padding: 10px 60px 34px 180px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -box-shadow: 0 0 10px rgba(0,0,0,.4);
    behavior: url(pie/PIE.htc);
    }

【问题讨论】:

  • 一定要绝对定位吗?
  • 不,我只是想让它随窗口移动。这是它应该看起来的方式,但不幸的是,我不得不更改窗口的高度以适应并且我希望窗口的高度能够自动调整大小,或者我被困在单独调整每个窗口的大小。这是我希望它看起来如何的另一个示例。点击here
  • 我刚才是不是在产生幻觉? @Bala 刚刚发布了一个有效的答案,现在它已经消失了。

标签: css resize autoresize


【解决方案1】:

移除顶部:275px;并添加底部:0px;而是在近距离展示模型中

并添加这个 div

   <div style="position: relative;">
   <a class="close-reveal-modal"></a>
   </div>

【讨论】:

  • 我不需要那个&lt;div&gt;,尽管它确实有效。我只是删除了top: 275px;,这就足够了。这是更新后的fiddle
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-02-02
  • 1970-01-01
  • 2015-02-23
  • 1970-01-01
  • 1970-01-01
  • 2012-07-29
相关资源
最近更新 更多