没有位置的覆盖:固定

我在最近的菜单中发现了一个非常酷的方法，那就是将正文设置为:

position: relative

并像这样设置你的包装器类:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

这意味着你不必设置位置固定，仍然可以允许滚动。我用这个来覆盖非常大的菜单。

Old question, but in my case i found using position:fixed solved it for me. My situation might have been a little different though. I had an overlayed semi transparent div with a loading animation in it that I needed displayed while the page was loading. So using height:auto / 100% or min-height: 100% both filled the window but not the off-screen area. Using position:fixed made this overlay scroll with the user, so it always covered the visible area and kept my preloading animation centred on the screen.

现代浏览器支持“视口高度”单位。这将把div展开到可用的视口高度。我发现它比其他任何方法都可靠。

#some_div {
    height: 100vh;
    background: black;
}

好吧，我试过这样的方法:

身体(正常)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

这不是正确的写法，但如果你让主div显示为表格，它会展开，然后我实现滚动条。

通常，当父Div的子元素被浮动时，就会出现这个问题。以下是该问题的最新解决方案:

在你的CSS文件中写入下面的类。clearfix和伪选择器

.clearfix:after {
content: "";
display: table;
clear: both;
}

然后，在你的HTML中，添加.clearfix类到你的父Div中。例如:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

它应该一直工作。您可以将类名调用为.group而不是.clearfix，因为这将使代码更具语义性。注意，在双引号“”之间的Content值中不需要添加点甚至空格。另外，overflow: auto;也许可以解决问题，但它会导致其他问题，如显示滚动条，不建议使用。

来源:Lisa Catalano和Chris Coyier的博客

使用flex

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}