Question

我正在尝试创建一个左侧有固定宽度和固定位置侧边栏的布局。

问题是设置主要内容区域的宽度 - 它从屏幕向右延伸。这就是我所拥有的：

<body>
    <div class="left-sidebar">
        sidebar
    </div>
    <div class="main-content">
        main
    </div>
</body>

CSS：

body {
    position: relative;
}

.left-sidebar {
    position: fixed;
top: 0;
left: 0;
width: 220px;
}

.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}

如何让主内容div从左边开始以220px开始，但只填充窗口宽度？

Answer 1

尝试将主要内容设置为完全显示左侧，但为左侧留出余量，以便为侧边栏留出空间。

.main-content {
  position: absolute;
  top: 0;
  left: 0px;
  margin-left: 220px;
  background: #f0f0f0;
  width: 100%;
}

修改
我现在有一点时间来试用代码。我建议使用margin-left而不是padding-left，因为它更适合你想做的事情。使用保证金可让您选择在内容周围添加边框。此外，如果您确实希望在内容中填充，则可以将其设置为正常。如果你使用填充缩进侧边栏，你必须将220px添加到你想要的任何实际填充。

这就是我提出的使用边距而不是填充的方法。

body { margin: 0; padding: 0; border: 0; } .left-sidebar { position: absolute; top: 0; left: 0; width: 220px; border: 1px solid green; } .main-content { position: fixed; top: 0; left: 0px; right: 0px; margin-left: 220px; background: #f0f0f0; border: 1px solid red; }

我也同意引用动态驱动器的anser。最初学习CSS的最佳方法之一是使用工作样式表并根据您的需要进行自定义。它的最大优点是它已经是跨浏览器兼容的。只需使用Google即可获得一些灵感。

两列固定流体固定的CSS布局

1 个答案: