HTML/CSS：页面左侧的导航栏答案

【问题标题】：HTML/CSS: Nav bars on the left side of pageHTML/CSS：页面左侧的导航栏
【发布时间】：2011-01-18 15:59:00
【问题描述】：

我发现创建这样具有良好语义的布局很尴尬。

左侧是一个大约 150 像素宽的列，其中包含导航元素。

我想将网站这一部分的 HTML 放在 HTML 代码的开头，然后有一个简单的方法来强制页面的其余部分不要侵占左侧的区域（150 像素列）。

我已经考虑了一些选项。

将网站内容的其余部分放在一个 div 中，该 div 明确地具有 150 像素的左边距。
将导航元素设置为宽度 150 像素并向左浮动。页面的其余部分自然换行。

还有其他更适合此任务的选项吗？

以下是缺点。

现在将导航元素更改为 200 像素需要我将另一个 div 的左边距编辑为 200 像素。当然，这对于一次性布局更改来说并不算太糟糕，但是如果我让导航元素的宽度从脚本中动态更改呢？我需要脚本来更改 div 的边距。
如果将 nav 元素设置为 position:fixed（并使其占据页面的整个左列），则页面的其余部分不适应其现在的静止行为，并且在页面滚动时看起来很糟糕。为了解决这个问题，我需要使导航元素无限高。我不确定如何以正确的方式做到这一点。 height:9999999px;?这使我的页面有 1000 万像素高，滚动条现在没用了。

【问题讨论】：

标签： html css layout

【解决方案1】：

创建侧边栏：

<!-- html -->
<nav role="main">
  <a href="link.com">link</a>
</nav>

//css
nav{    
  width: 150px;
  float: left;
  display: inline;
  margin: 0;
  padding: 0;
  margin-right: 10px;
}

然后为你的主要内容创建一个容器

<!-- html -->
<section id="main">
  main content in here
</section>

//css
section#main{
  width: 500;
  float: left;
  margin: 0;
  padding: 0;
  display: inline;     
}

只要在源代码中将 nav 放在 section 之前，section 中的任何内容都会远离左手列，不会在它下面换行。

只需要确保重置所有 CSS，尤其是填充、边距和边框，除非你知道自己在做什么

祝你好运

【讨论】：

谢谢！我不知道<nav> 元素。尽管我在帖子中多次提到“导航元素”。
@Steven Lu - 警告一句，nav 标签是 HTML 5 标签，许多浏览器（IE6、IE7、IE8）不能正确支持。您应该将 nav 标签替换为 div 标签（可能是 nav 类），而不是使用 nav。
主流浏览器对html5的处理非常好。所有主要浏览器都支持 - 您可以使用 html5shiv 在较小的浏览器中向 dom 添加标签 - 但是，如果您愿意，可以使用 div
ps，如果你想看一个真实世界的 html5 Web 应用程序的例子，它被数百万人使用各种浏览器，然后去 google.com :) 现在拥抱 html5，不要不要等待
@stephenmurdoch - 应该赞扬进步和拥抱创新，但作为开发人员，我们必须确保每个人都能从我们的工作中受益。 HTML 5 仍处于工作草案阶段，要到 2022 年才能完全采用。IE7 和 IE8 占网络用户的大多数，因此使用不合规代码（适用于这些浏览器）将是鲁莽的。

【解决方案2】：

我一直使用选项 1，但如果有其他想法，我很想听听。

【讨论】：

【解决方案3】：

对你的“缺点”的一些建议：

如果您厌倦了一直更改具有相同值的两个属性，请考虑使用 LCSS、SASS 等 CSS 生成工具。
如果我没记错的话，不是为左侧边栏设置height: 999999px，而是存在一些类似这样的技巧：http://www.ejeliot.com/blog/61

【讨论】：

Linkrot。请更新链接，或者更好地解释答案中的“技巧”。干杯。