2

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

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

<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 开始，但只填充窗口宽度？

4

1 回答 1

0

尝试将主要内容设置为完全向左显示，但给它一个左边距以为侧边栏腾出空间。 

.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 来寻找灵感。

于 2012-12-21T16:46:32.030 回答