css - 如何强制液体定位的 div 在某个点停止移动？

Question

我正在这里制作一个网站的原型(prototype):

http://www.paulgrantdesign.com/valcomp/index.php

我在中间有一个 div，它设置为粘在中间。它有一个给定的高度，所以我在 css 中做了

#middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
top: 50%;
margin-top: -112px;
z-index: 100;
}

它根据需要位于中间。但是当窗口变得太小时，我不希望它覆盖它上面的东西。我可以设置它，使窗口顶部和该 div 顶部之间始终保持最小距离吗？

Answer 1

也许你可以像这样使用媒体查询:

@media only screen
and (min-width : 1000px) {
  #middle {
   color:red;
}
}

你可以阅读这些文章

http://css-tricks.com/6731-css-media-queries/ ,

http://css-tricks.com/6206-resolution-specific-stylesheets/