我想知道您如何通过 HTML/CSS 应用 2 列侧边栏 一个固定的侧边栏在左边，另一个在右边？
引用这个:
最佳答案
这是一个 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>
关于html - 2 侧边栏列布局(如何)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20452475/