代码之家 › 专栏 › 技术社区 › Oliver Williams

如果底部位于视口下方,则CSS将元素垂直到底部拉伸

css html

-2

Oliver Williams · 技术社区 · 6 年前

我有一个移动响应菜单,隐藏在左边,当有人点击汉堡时,它就会出现。除了。。

背景是一个 <a> 元素,样式如下:

.backdrop.expanded,
.main-menu[aria-expanded="true"] + .backdrop {
    position: absolute;
    display: block;
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 998;
    background: #000;
    background: rgba(0,0,0,.50);
    cursor: default;
}

但当它打开时,其垂直范围是视口的底部。我希望它能延伸到页面底部。我该怎么做?

注意我希望人们可以在菜单打开时滚动,因为这可能会有所帮助。

1 回复 | 直到 6 年前

Usagi Miyamoto 6 年前

试试这样:

.backdrop.expanded,
.main-menu[aria-expanded="true"] + .backdrop {
    position: absolute;
    display: block;
    content: "";
    left: 0;
    top: 0;
    right: 0;  /* instead of: width: 100%; */
    bottom: 0; /* instead of: height: 100%; */
    z-index: 998;
    background: #000;
    background: rgba(0,0,0,.50);
    cursor: default;
}

作为亲戚 width 和 height 对…没有影响 position: absolute ...