Question

我有两个div：外部div总是800像素高，内部div高150像素。内部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像素。外部底部。

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

Answer 1

您必须将position:relative添加到外部div才能成为绝对定位元素的容器

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

Answer 2

嗯，我的猜测是你希望内部div始终位于外部div的顶部，无论窗口大小如何。

我在想你正在寻找的是position: fixed，或者通常可以帮助CSS定位：http://www.w3schools.com/css/css_positioning.asp并使用z-index：http://www.w3schools.com/css/pr_pos_z-index.asp

我会选择这个css：

#inner
{
position: fixed;
z-index: 1;
width; 100%;
height: 150px;
bottom: 60px;
}

Answer 3

也许你可以使用CSS3 Media查询，如下所示：

http://www.w3.org/TR/css3-mediaqueries/#height

这些将适用于大多数功能强大的浏览器，但不适用于IE，并允许您编写仅在浏览器具有一定宽度/高度（以及更多）时启动的css。例如，它们对于iPad和iPhone的风格设计非常有用。

有一个jQuery插件可以让它们运行IE ...

www.protofunc.com/scripts/jquery/mediaqueries /

...但不幸的是它只支持基于宽度的媒体查询。： - /

Answer 4

如果我删除'min-height'然后添加以下行：

#outer { max-height: 100% }

它有效（但外部元素较小）。

Answer 5

指定了height的CSS3媒体查询？

@media screen and (max-width: 800px) , screen and (max-height: 800px) {
   ...
}

不完全确定您的要求是什么 - 但是根据浏览器尺寸/分辨率的具体布局，我建议这样做。

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

5 个答案: