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

Question

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

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

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

我考虑过一些选择。

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

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

这是缺点。

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

Answer 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放置在源代码中的节之前，该节中的任何内容都将远离左侧列，并且不会在其下方包裹。

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

祝你好运