可缩放 div 中的 100% 行高文本答案

【问题标题】：100% line height text in scaleable div可缩放 div 中的 100% 行高文本
【发布时间】：2017-02-21 06:00:01
【问题描述】：

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

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

如果需要，可以使用 jQuery 选项。

Here is a fiddle I made with an example of my code

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%;
}

【问题讨论】：

标签： jquery html responsive-design css

【解决方案1】：

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

在您的示例中运行良好:)

【讨论】：

感谢我编辑的提示以便与我的网站一起使用。我可以不使用我制作的脚本，但它似乎可以工作function lineheight() { var nav = $('#navigation').height(); $('.nav_button').css({ 'line-height': nav + 'px' }); } lineheight (); $(window).resize(lineheight);
恐怕你对 resize 事件的定义不起作用...试试这个：$(window).resize(function(){ lineheight(); });