Я пытаюсь достичь этой реализации:
Контейнер - height: 100%
а li
height: 50%
. Ссылка составляет 50% высоты, и вся цветная область должна быть кликабельна. Это мой код:
html, body {
height: 100%;
}
.menu {
height: 100%;
ul {
height: 100%;
li {
height: 50%;
a {
display: block;
height: 100%;
line-height: 100%;
}
}
}
}
К сожалению, трюк line-height
не работает. Высота окна, очевидно, жидкая, потому что она должна реагировать на каждое устройство. Идеи?
Что, если вы просто это сделаете? http://jsfiddle.net/SBag9/2/
.menu {
height: 100%;
text-align: center;
display: flex;
align-items: center;
flex-direction: column;
margin-top: 50%;
}
Попробуйте установить line-height: 50%
для элемента <li>
.
Возможно, вам понадобится использовать что-то вроде положения и абсолютного для достижения этого.
html, body {
height: 100%;
margin:0px;
padding:0px;
}
.menu {height: 100%;}
.menu ul {
height: 100%;
list-style:none;
margin:0px;
padding:0px;
}
.menu ul li {
height: 50%;
width:100%;
display:table;
}
.menu ul li a {
display:table-cell;
vertical-align:middle;
text-decoration:none;
font-weight:bold;
text-align:center;
color:#000;
}
Вот рабочая скрипка:
li
должна быть кликабельной. Следовательно, элементы a
должны быть больше, чем весь li
. Не работает таким образом.