Question

我想知道如何通过HTML / CSS应用2列边栏左边是固定边栏，右边是另一边？

参考：

enter image description here

Answer 1

这是 FIDDLE

<header>

</header>

<div class="wrapper">


</div>

<div class="sidebar-l">

</div>

<div class="sidebar-r">

</div>

<footer>

</footer>


header {
  background:#00ff18;
  width: 60%;
  height: 120px;
  margin: 0 auto;
}
.wrapper {
  background: #ffffff;
  width: 60%;
  min-height: 600px;
  margin: 0 auto;
}
footer {
  background: #151316;
  width: 60%;
  height: 120px;
  margin: 0 auto;
}
.sidebar-l,
.sidebar-r {
  background: #00ffae;
  position: fixed;
  top: 0;
  width: 20%;
  height: 1000px;
}
.sidebar-l {
  left: 0;
}
.sidebar-r {
  right: 0;
}

如果要对侧边栏使用动态高度并将其保持在窗口大小调整上，请在</body>标记之前添加此脚本。

<script>
  $(function(){

    $('.sidebar-l, .sidebar-r').css({ height: $(window).innerHeight() + 'px' });

    $(window).on('resize', function(){
      $('.sidebar-l, .sidebar-r').css({ height: $(window).innerHeight() + 'px' });
    });

  });
</script>

当然（如果您决定使用上面的脚本）请不要忘记在<head>部分中包含jQuery库

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Answer 2

容易！

您确实需要将网页内容拆分为三列;左，中，右。然后你可以创建三个div并将它们全部浮动到左边。

例如：

<div style="float:left;background:yellow;width:20%;position:relative">Left column</div>
<div style="float:left;background:green;width:60%;position:relative">
  <div style="width:100%;border-bottom:1px solid #cfcfcf;height:50px;float:left">
      Header
  </div>
    <div style="width:100%;clear:left">
      Main content
  </div>

右栏

参见jsfiddle：http://jsfiddle.net/cca5P/

2个侧栏列布局（如何）？

2 个答案: