创建行为良好的选项卡

当创建使用真实网页文本的导航选项卡时，当该文本大小调整时，可能会出现一些定位问题。 文本大小调整时网页的自然流程是向下推。 这可能会将您的主要内容区域向下推，或将选项卡强制到该区域。 使用一些智能 CSS，我们可以通过创建在文本大小调整时 **向上增长** 的选项卡来解决此问题。

错误示例

查看错误示例

在此错误选项卡行为示例中，当文本大小调整时，选项卡向下增长并推入主要内容区域。

一种解决方案可能是让选项卡在增长时向下推主要内容区域。 在此示例中，这可能没问题，但在更多基于图像的设计或担心在“折叠”下方丢失内容的用户看来，这可能是不可接受的。

正确示例

查看正确示例

在我们的正确示例中，主要内容区域保持不变。 选项卡向上增长，其余文本像往常一样向下增长。

技巧

技巧的核心是使用两个嵌套的块级元素。 外部块控制定位。 我们需要锁定到主要内容的顶部，因此外部块需要 **top: 0;**。 然后，内部块使用绝对定位粘贴到外部块的底部。 通过设置固定的底部值，**bottom: 0;**，菜单项无处可增长，只能向上。

菜单标记

<div id="nav">
	<ul>
		<li><a href="#">Tab 4</a></li>
		<li><a href="#">Tab 3</a></li>
		<li><a href="#">Tab 2</a></li>
		<li><a href="#">Tab 1</a></li>
	</ul>
</div>

代码纯粹主义者会立即注意到将无序列表不必要地包装在 div 中的常见错误。 然而，在我们的案例中，这是非常必要的，并且我们需要这两个块级元素来实现我们的技巧。

两个块的 CSS

#nav	 { 
   position: absolute;
   left: 0; 
   top: 0; 
   width: 100%; 
   height: 0;
}		
#nav ul { 
   position: absolute; 
   bottom: 0; 
   right: 0; 
}

这是一个视觉效果

注意

随着越来越多的浏览器 使用完整缩放 而不是直接文本大小调整，这个问题越来越不重要了。 但即便如此，在目前看来，这仍然是一种良好的负责任的设计。