Question

我正在尝试实现两列相等高度的布局，并决定使用CSS表和表格单元规则，因为它似乎是最简单的方法，具有最少的缺点。我希望侧栏列是一个可切换的非画布列，但是当侧边栏移出画布时，我似乎无法使主列占据整个宽度。我尝试了各种保证金/头寸价值无济于事。这是我的代码和JSFiddle。

http://jsfiddle.net/RaAbF/1/

HTML

<div class="outer">
  <header id="header">
    <a id="toggle-sidebar" href="#">toggle</a>
    [header]
  </header>
  <div id="inner">
    <div id="sidebar">
      [sidebar]<br>
      [sidebar]<br>
      [sidebar]<br>
      [sidebar]<br>
      [sidebar]<br>
      [sidebar]<br>
      [sidebar]<br>
    </div>
    <div id="main">
      [main]<br>
      [main]<br>
    </div>
  </div>
</div>

CSS

.outer {
  position: relative;
  width: 600px;
  border-left: 1px solid #BFBFBF;
  border-right: 1px solid #BFBFBF;
  box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.45);
  margin-right: auto;
  margin-left: auto;
  padding: 0px;
  overflow: hidden;
}

.outer:before,
.outer:after {
  display: table;
  content: " ";
}

.outer:after {
  clear: both;
}

#header {
  height: 50px;
  background-color: #999;
}

#inner {
  display: table;
  table-layout: fixed;
  width: 100%;
  height: 100%;
}

#sidebar {
  display: table-cell;
  vertical-align: top;
  width: 220px;
  background-color: #bbb;
}

#main {
  display: table-cell;
  vertical-align: top;
  background-color: #ddd;
}

body.hidden-sidebar #inner {
  position: relative;
  left: -220px;
  right: 0px;
}

body.hidden-sidebar #main {
  width: 100%;
}

JS

$(document).ready(function() {
  $('#toggle-sidebar').click(function(e) {
    $('body').toggleClass("hidden-sidebar");
    e.preventDefault();
  });
});

两列相等的高度布局使用表/表格单元格与画布边栏

0 个答案: