我正在寻找获得 < ul >
的最简单方法它是 < li >
元素到 < ul >'s
的 100% 高度 parent 。 parent 不是固定的(我试图避免这种情况,因此它在移动设备上很灵活)。这是 JSFiddle
基本上我希望红色框的高度为灰色框的 100%。
谢谢!
注意:我已经尝试过各种方法,但似乎没有什么能正常工作。
最佳答案
您需要做几件事。
- 指定
.site-header
的高度,例如40px li
的每个 parent 都需要 100% 高度- 使标题和导航容器内联
这应该可行
h1 {
margin: 0;
display: inline;
}
.site-header {
background: rgba( 0,0,0,0.5 );
width: 100%;
height: 40px;
}
.row {
height: 100%;
}
.site-title {
display: inline;
font-family: 'Roboto Mono';
font-weight: 100;
}
h1 {
margin: 0;
padding: 0;
display: inline;
}
.site-nav {
height: 100%;
float: right;
}
ul {
list-style-type: none;
height: 100%;
margin: 0;
}
li {
background: red;
float: left;
height: 100%;
text-align: center;
width: 150px;
}
关于html - ul 和 li 非固定父级的 100% 高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34257716/