时间戳

首页 > 解决方案 > 如果底部低于视口，CSS将元素垂直拉伸到底部

html - 如果底部低于视口，CSS将元素垂直拉伸到底部

问题描述

我有一个移动响应菜单，它隐藏在左边，当有人点击汉堡包时会出来。完美运行，除了..

背景是一个<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;
}

但是当它打开时，它的垂直范围是到视口的底部。我希望它扩展到页面底部。我该怎么做呢？

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

标签： htmlcss

解决方案

尝试这样的事情：

.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

推荐阅读