HTML

Question

根据附图。我正在尝试制作包含多个项目的<ul>。但是，我希望前五个项目始终填充视口高度，如果有超过五个项目，我需要其余项目与前五个<li>的高度相同。

根据图片中的li编号4，可能有一个嵌套的<ul>可以填充多个<li>的宽度。

所有<li>内的文本需要垂直居中并支持多行，同时保持与其他元素相同的高度。

注意：折叠下方的任何其他lis需要与前五个相同的高度。（即使一开始少于五个元素，它们也不应该填满整个高度。只有当五个元素完成整个页面高度时。

非常感谢任何帮助！我之前的问题并不完整，我错过了一些解释：Vertically Stretch List Items我正在使用仅限CSS的解决方案（目前），根据需要不起作用。

感谢。 enter image description here

使用的代码：

ul.navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: table;
    width: 100%;
    height: 100%;
}
ul.navigation li {
    display: table-row;
}
ul.navigation li a {
    font-size:1.8em;
    display: table-cell;
    vertical-align: middle;
    padding: 1em 1.1em;
    text-transform: uppercase;
    color: white;
    text-decoration: none;
}

Answer 1

关于高度，一种方法是使用vh关键字，该关键字是视口高度的1％。它只在IE9中有效，但我猜这是一个移动截图，你应该没问题。

您还应该考虑使用Flexbox，它在移动浏览器中运行良好，它允许您进行垂直居中而不会出现display:table的所有混乱。

ul{
    display:flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    height: 100vh;
    border: 1px solid red;
    width:24em;
}
li{
    display:flex;
    flex-direction: row;
    justify-content:space-around;
    align-items:center;
}
li > div {
    flex-grow:1;
    flex-shrink:1;
    max-width: 50%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
li:nth-child(even){
    background: gray;
}
ul > li {
    height: 20vh;
}

这是一个dabblet： http://result.dabblet.com/gist/78afacb7e747b7e24e62/ba0f81dc9278ec743c58027e995a0f6c381329b8

http://dabblet.com/gist/78afacb7e747b7e24e62

Answer 2

也许这样的事情可能会指向你：http://jsfiddle.net/swm53ran/10/

HTML

<div class="container">
    <div class="section">My content here</div>
    <div class="section">My content here</div>
    <div class="section">My content here</div>
    <div class="section">
        <div class="sub-section">Half Content</div>
        <div class="sub-section" style="margin-left:-4px;">Half Content</div> (EDITED)
    </div>
    <div class="section">My content here</div>
</div>

CSS

.section {
    height: 20vh;
    background-color: lightgray;
    display: block;
}
.sub-section {
    width: 50%
    display: inline-block;
}

编辑：对hungerstar的见解的新小提琴http://jsfiddle.net/swm53ran/11/赞美

Answer 3

我选择用js＆＃39;计算身高。而不是vh。我认为vh更优雅，但如果你需要更多支持，你将不得不使用js。

http://jsbin.com/huroqiliba/1/edit?html,css,js,output

我使用flexbox进行文本和列的垂直居中。 Flexbox在这一点上拥有非常可靠的支持。 http://caniuse.com/#feat=flexbox

Answer 4

我将在此解决方案中使用vh和flexbox以避免执行任何js。如果您需要支持较旧的浏览器，请考虑使用一个pollyfill，例如：https://github.com/saabi/vminpoly和https://github.com/doctyper/flexie，它们与Modernizr配合得非常好。

HTML

  <ul class="navigation">
    <li class="one"><a href="#">One</a></li>
    <li class="two"><a href="#">Two<br> Overflow: hidden keeps this long li at an equal height, but obviously be smart about this and don't cut off your content with a huge font size or long text.</a></li>
    <li class="three"><a href="#">Three</a></li>
      <ul>
        <li class="four-a"><a href="#">Four and</a></li><li class="four-b"><a href="#">a Half</a></li></ul><li class="five"><a href="#">Five</a></li>
      <li class="fold"><a href="#">Fold</a></li>
      <li class="fold"><a href="#">Fold</a></li>
      <li class="fold"><a href="#">Fold</a></li>
    </ul>

CSS

ul.navigation, ul.navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: block;
    width: 100%;
    height: 100%;

}

ul.navigation ul li {
  display:inline-flex;
  width:50%;

}

ul.navigation ul{
  display:flex;
}

ul.navigation li a {
    font-size:1.8em;
    display: block;
    padding: 1em 1.1em;
    text-transform: uppercase;
    color: white;
    text-decoration: none;

}

ul.navigation li{
  overflow: hidden; 
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.one {background-color:lightgray;}
.two {background-color:tomato;}
.three {background-color:palegreen;}
.four-a {background-color:indianred;}
.four-b {background-color:palevioletred;}
.five {background-color:papayawhip;}
.fold{background-color:black;}

这是我的代码：http://codepen.io/fontophilic/pen/yyVNQd?editors=110

使用CSS灵活的自定义布局（如果需要，可能是JS）

4 个答案:

HTML

CSS