jquery - 可缩放 div 中的 100% 行高文本

Question

我需要在 div 内创建一个随浏览器窗口缩放的菜单。文本大小根据窗口大小进行调整（使用 fittext.js），外部 DIV 始终为窗口高度的 15%。由于 100% 行高不起作用，还有哪些其他选项。

另外，当我在这里时，可以做些什么来使文本链接跨越包含 DIV 宽度的 100%？（之间的间距相等，因此链接覆盖整个 div）

如果需要，jQuery 选项很好。

这是我用我的代码示例制作的小提琴

HTML 源代码

<nav id="navigation">
<a href="#welcome" class="nav_button"><span>Welcome</span></a>
<a href="#about" class="nav_button"><span>About</span></a>
<a href="#work" class="nav_button"><span>Work</span></a>
<a href="#contact" class="nav_button"><span>Contact</span></a>    
</nav>​

CSS 源码

#navigation {
width: 80%;
height: 15%;
position: fixed;
top: 5%;
left: 10%;
background: #ccc;
}
.nav_button {
height: 100%;
width: 20%;
position: relative;
display: inline-block;
text-align: center;
line-height: 100%;
}

​</p>

Answer 1

$btn = $('.nav_button');
$btn.css('line-height', $btn.height() + 'px');

在您的示例中工作正常:)