无法将最小高度设置为固定位置div

时间:2018-02-21 03:57:45

标签: javascript css css-position overlay

我想要做的是创建一个叠加层,我可以重复使用不同高度的不同内容。但是,如果我使用最小高度或甚至高度自动,高度仍然会占据整个窗口的高度。

有没有css方法可以做到这一点,或者我需要使用Javascript?



.reusable-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: #FFF;
  width: 600px;
  min-height: 300px;
  border-radius: 3px;
  box-shadow: 0 0 2px #333;
  padding: 20px;
  z-index: 9999999;
}

<div class="reusable-overlay">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras faucibus dapibus imperdiet. Aliquam aliquam pulvinar justo. Suspendisse ac laoreet tortor, eget dignissim lacus. Maecenas ac diam vitae orci eleifend lacinia in in ex. Vivamus consequat, mi
  id pulvinar aliquam, justo diam blandit ligula, vel blandit mauris sem eu risus. Quisque dignissim lorem et justo pellentesque gravida faucibus id mauris. Etiam faucibus est eget condimentum imperdiet. Donec tristique nibh id consequat interdum.
</div>
&#13;
&#13;
&#13;

Codepen:https://codepen.io/aguerrero/pen/paVgry

0 个答案:

没有答案