Question

我一直在尝试使用css div（深蓝色）进行布局，以便根据窗口大小改变大小而不覆盖底部面板，我认为高度为100％官方，但不明白因为它忽略了下面的面板，并结束了移出页面

现在看到不让我发布图片，所以我也有：

HTML：

<div id="container">
    <div id="message">hi i'm a message</div><!--i can see this div-->
    <div id="darkBlue"></div>
    <div id="anotherPanel">you can't see me</div>
</div>

和这个css

#container{//This container is attached to the right side
    right: 0;
    width: 300px;
    position: fixed;
    height: 100%;
    top: 0;
    color: white;
    padding: 20px;
}
#darkBlue{//this div cover the next div
    height: 100%;
    border: 1px solid white;
    background: #3a5193;
    bottom: 100px;
}
#anotherPanel{//i can't see this div.......
    height: 100px;
    botton: 0px;
}

不确定你是否可以用css解决，或者不得不求助于使用javascript（这是我想避免的），谁知道有些人可以帮助我？

更新：这是布局尝试的图片：https://www.dropbox.com/s/t9nl5mb3sq85m3j/repro.png

Answer 1

如果为子元素指定100％的高度，它将占用父元素高度的100％。如果您希望元素覆盖整个容器而不在父元素的文档流中，您可以尝试执行以下操作：

#darkBlue {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #3a5193;
}

编辑： @Niels提到了我之前没有提到的其他细节。为此，父元素位置需要设置为fixed，absolute或relative

Answer 2

您在anotherPanel的CSS中输入了拼写错误。您有botton而不是bottom。此外，使用此CSS属性时，最好设置position。

试试这个：

#anotherPanel{
    height: 100px;
    width: 300px;
    bottom: 0px;
    background: #F00;
    position:absolute;
}

Is this the droid you are looking for?

最佳。

Answer 3

使用bottom top left right，您必须定义position。在您的情况下，从bottom #darkBlue移除#anotherPanel并添加到#darkBlue height: calc(100% - 100px)

DEMO

<强>更新

如果您不想使用calc，请将margin-bottom:-100px;添加到#darkBlue

DEMO

覆盖div高度为100％的另一个div

3 个答案: