代码之家 › 专栏 › 技术社区 › Mario MateaÈ

如何使背景高度达到父母身高的100%

css

Mario MateaÈ · 技术社区 · 4 年前

我试图在CSS中创建一个菜单,这就是我的HTML框架的样子:

<body>
    <div class="menu-container">
        <ul class="menu-list">
            <li class="menu-item">Item1</li>
            <li class="menu-item">Item2</li>
            <li class="menu-item">Item3</li>
        </ul>
    </div>
  </body>

这是我关注的CSS部分:

.menu-container {
    background-color: #e5e5e5;
    width: 100%;
    height: 4rem;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
}

.menu-list {
    margin: 0 auto;
}

.menu-item {
    display: inline-block;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}

基本上,我试图实现的是将每个元素的背景色设置为红色 ,在元素悬停( <li> ).问题是,背景色似乎无法填充其父对象(背景)的整个高度 menu-container ),虽然这是我真正想做的。

我试着设置 menu-item 填充到100%,但它只填充整个屏幕。它不是相对的 菜单容器 身高。

更准确地说,它看起来是这样的:

但我想要整个div的红色背景高度,如下所示:

为了实现这一目标,我能做些什么?非常感谢。

6 回复 | 直到 4 年前

Suraj Sanwal 4 年前

因此,我没有给父div指定一个固定的高度,而是通过从顶部和底部分别添加填充来调整它 li 要素

对CSS进行了一些更改,请查看下面的代码片段:

    .menu-container {
    background-color: #e5e5e5;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
}

.menu-list {
    margin: 0 auto;
}

.menu-item {
    display: inline-block;
    padding: 1.25rem 0;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}

<body>
    <div class="menu-container">
        <ul class="menu-list">
            <li class="menu-item">Item1</li>
            <li class="menu-item">Item2</li>
            <li class="menu-item">Item3</li>
        </ul>
    </div>
  </body>

Aditya Rastogi 4 年前

只需在菜单列表和菜单项中添加高度:100%。如果希望项目居中,而不是粘在顶部,可以使用“显示:弯曲”和“对齐项目:中心”,对齐“内容:中心”

Tarun Bisht 4 年前

.menu-container {
    background-color: blue;
    width: 100%;
    height: 4rem;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content:center;
}

.menu-list {
    height: 100%;
    background-color:yellow;
    display:flex;
    align-items: center;
    justify-content:center;
}

.menu-item {
    display: flex;
    align-items:center;
    justify-content:center;
    height:100%;
    background-color:green;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}

你可以这样做你的CSS, 将高度设置为100%将占用父元素的100%高度。

Sumit Kumar Das 4 年前

我正在尝试修复你的css,请检查我的解决方案-

.menu-container {
    background-color: #e5e5e5;
    width: 100%;
    height: 4rem;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
}

/* at first you inline the whole ul */
.menu-list {
    margin: 0 auto;
    display: flex;
    list-style: none;
}
/* then center the options & set full height */
.menu-item {
    display: flex;
    align-items: center;
    height: 4rem;
    cursor: pointer;
    padding: 0 1rem;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}

Sumit Kumar Das 4 年前

解决方案2

.menu-container {
    background-color: #e5e5e5;
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    align-items: center;
}

/* set full height */
.menu-list {
    margin: 0 auto;
    height: 100%;
}
/* set full height also */
.menu-item {
    display: inline-block;
    padding: 1.25rem 0;
    height: 100%;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}

wuarmin 4 年前

使用css时,必须设置 height 关于 menu-list 还有 menu-item 到 100%

.menu-container {
    background-color: #e5e5e5;
    width: 100%;
    position: fixed;
    height: 100px;
    bottom: 0;
    display: flex;
    align-items: center;
}

.menu-list {
    margin: 0 auto;
    height: 100%;
}

.menu-item {
    display: inline-block;
    padding: 1.25rem 0;
    height: inherit;
}

.menu-item:not(:last-child) {
    margin-right: 5vw;
}
.menu-item:hover {
    background-color: red;
}