jquery - 当浏览器窗口高度小于 800 像素时，需要帮助保持嵌套的 div 可见

Question

我有两个 div:一个始终为 800 像素高的外部 div 和一个始终为 150 像素高的内部 div。内部 div 位于距外部 div 底部 60 像素的位置。

外部 div 也在浏览器窗口中垂直居中。

<div id='outer'>
   <div id='inner'>
     some stuff
   </div>
<div>

<styles>
#outer
{
  position: relative;
text-align: left;
width: 1200px;
height: 800px;
min-width: 1000px;
min-height: 750px;
margin: 0px auto;
}
#inner
{
  position: absolute;
  background: rgba(10, 9, 9, .9);
  height: 150px;
  width: 100%;
  z-index: 1;
  bottom: 60px;
  overflow: hidden;
}

我需要调整我的 CSS，以便如果浏览器窗口的高度小于 800 像素，则内部 div 位于距浏览器窗口底部 60 像素的位置(以便它保持可见)，而不是距底部 60 像素的位置外部 div 的底部。

但是当浏览器窗口高于 800 像素时，我希望内部 div 位于距离外部 div 底部 60 像素的位置。

Answer 1

你必须在外层的div中添加position:relative让它成为绝对定位元素的容器

我不太明白你的问题，所以这是我最好的猜测。