对于具有固定宽度侧边栏的响应式设计，哪种方法更好？

Question

那么哪种方法更适合具有固定宽度侧边栏的响应式设计？

两者都正常工作，现在有些人说第二种方法更好，有些人先说......

还是完全一样？

方法1：http://jsfiddle.net/56erp1my/33/

<div id="wrap">
    <div id="header">Header</div>
   <div id="sidebar">Static LEFT sidebar</div>
    <div id="content">Main content: fluid div.<br/>Width is automatically adjusted between 300px and 700px</div>

    <div id="footer">Footer</div>
</div>

#wrap { padding: 10px; max-width:1000px; margin: 0 auto;}

#header {background: #0f0;}

#sidebar {width: 200px; float: right; height: 200px; background: #ddd;}

#content {margin-right: 210px; min-height: 100px; background: #ddd;}

#footer {clear:both; background: #0f0;}

方法2：http://jsfiddle.net/56erp1my/35/

<h2>With Content:</h2>

<div class="wrap">
  <div class="right">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <div class="left">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

.wrap {
  background: #eee;
  padding: 10px;
  max-width: 960px;
  overflow: hidden;
  margin: 0 auto;
}

.left, .right {
  padding: 5px;
}

.left {
  background: tomato;
  display: table-cell;
  width: 9999px;
}

.right {
  background: green;
  width: 300px;
  float: right;
}

谢谢

Answer 1

第二种方法在维护方面似乎更好。这就是原因：

1. 如果您想在第一种方法中更改右侧边栏的宽度，您还必须使用课程内容更改元素的边距。
2. 在第二种方法中，如果您更改右侧栏的宽度，左侧的内容将调整大小并自动重新定位。