如何实现简单的布局：header - sidebar - content

Question

我正在寻找一种简单，有效和现代的方式来实现网站的以下布局： - 标题：100％宽度 - 标题下方    - 固定宽度的侧边栏    - 内容区域填充至100％

我找到了一个很好的例子here，但这完全基于'em'大小调整，我们有很多背景像素，所以我们需要一个带'px'的例子。 我们认为在这个具体的例子中我们可以很容易地切换到'px'，但显然这并不容易让这个完美。 提前感谢所有提示！

Answer 1

您可以使用flex在左侧使用固定宽度的侧边栏，而右侧的内容占用剩余空间。请注意，随CSS3添加了flex，旧版本的Internet Explorer可能不支持它（http://caniuse.com/#search=flex）

.contentContainer {
    display:flex;
    flex-direction: row;
}
.left {
  background-color: #ffaa00;
  min-width:200px;
}
.right {
  background-color: #00aaaa;
  flex:1;
}

https://jsfiddle.net/nrv5p70q/1/

然而，一些简单的谷歌搜索也可以解决这个问题。您可能需要查看此备忘单： https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

您正在使用的示例将允许您实现此目的。

您可以使用em to px conversion将值从em转换为px。一旦你有正确的值，你可以在CSS中替换它们。因此。

 #nav {
   margin-left: -352px; //was -22em
   margin-left: expression((-(document.getElementById("wrapper").clientWidth))+"px");
   left: 208px; //was 13em;
 }

使用此方法将允许您继续w3schools教程，这是一个很好的方法来加快html和CSS的速度。