一个`position：fixed`侧边栏，其宽度设置为百分比？

Question

我已成功使用漂亮的Susy grid system创建一个类似WebDesignerWall.com:

的响应式布局

我未能实现的是position:fixed侧边栏。

当页面滚动并停留在同一个地方时，这样的侧边栏不会滚动。这非常方便（无论如何，你实际上无法将更多内容放入侧边栏，因为它会在一个狭窄的窗口中使页面顶部混乱）。

每当我将position:fixed应用于列时，我的布局都会变得疯狂： 彩色块被声明为三列宽，但当position:fixed应用于侧边栏时会进一步拉伸..

我认为问题在于侧边栏的宽度是相对的，i。即以百分比设置。由于position:fixed，宽度是根据浏览器窗口的宽度而不是其容器来测量的（尽管我将容器设置为position:relative）。

问题是：如何在对其容器测量宽度时，如何将列固定到窗口，而不是视口？

也许用JS来修复元素的位置？

PS我已经尝试了width: inherit solution，但这对我的情况没有任何帮助。

Answer 1

这样做的方法是使用第二个容器。我不知道你的确切代码，但这是一个例子。我们假设您的结构是这样的：

<div class="page">
  <header class="banner">
    <h1>header</h1>
  </header>
  <nav class="navigation">
    <ul class="nav-inner">
      <li>navigation link</li>
    </ul>
  </nav>
  <article class="main">
    <h2>main content</h2>
  </article>
  <footer class="contentinfo">
    <p>footer</p>
  </footer>
</div>

我在那里做的唯一重要的假设是确保我的导航边栏周围有一个额外的包装器。我有<nav>标记和<ul>标记可供使用。您可以使用任何所需的标签，只要侧边栏有两个可用于结构的标签 - 固定容器的外部和侧边栏本身的内部。 CSS看起来像这样：

// one container for everything in the standard document flow.
.page {
  @include container;
  @include susy-grid-background;
}

// a position-fixed container for the sidebar.
.navigation {
  @include container;
  @include susy-grid-background;
  position: fixed;
  left: 0;
  right: 0;
  // the sidebar itself only spans 3 columns.
  .nav-inner { @include span-columns(3); }
}

// the main content just needs to leave that space open.
.main { @include pre(3); }

// styles to help you see what is happening.
header, article, .nav-inner, footer {
  padding: 6em 0;
  outline: 1px solid red;
}

干杯。

Answer 2

您不能将固定位置元素与其容器position: relative或position: relative分开。只需将其宽度设置为绝对值 - 看起来您的内容总是宽760像素，对吧？

Answer 3

  

也许用JS来修复元素的位置？

是的，但这将是乏味的，并不是理想的解决方案。

相反，使用JavaScript计算适当的宽度并分配它，而不是直接在CSS中使用百分比。这是一个基本概要：

function updateSize() {
    var outer = document.getElementById("outercontainer"); //get the container that contains your sidebar
    var navcol = document.getElementById("navcol"); //get the sidebar (which is supposed to have position: fixed;)
    navcol.style.width = Math.floor(outer.offsetWidth * 45/100) + "px"; //or whatever your percentage is
}
updateSize();
window.onresize = updateSize; /*make sure to update width when the window is resized*/

注意：上面使用的ID只是占位符 - 您需要修改它们以适合您的实际页面。

Answer 4

你为什么不用数学？ =）

示例html：

 <div class="container">
    <div class="col">
        <div class="fixed">This is fixed</div>
    </div>
</div>

CSS

.container {
    width: 80%;
    margin: 0 auto;
}

.col {
   float: left;
    width: 33.3333333333%;
}

.fixed {
    position: fixed;
    width: 26.666666666%; /* .container width x .col width*/
}

Answer 5

position:fixed的作用类似于position:absolute，因此它不会与其容器相关联。它只是浮动到您的文档中。 快速修复将是这样的：

<div id="fixed-element" style="width:30%"> /* 30% of the document width*/
lorem ipsum dolor sit amet
</div>

<div id="faux-sidebar" style="width:30%; display:block"> /* 30% of the document, leave it empty, so it acts like a placeholder for the fixed element*/
&nbsp;
</div>

<div id="the-rest" style="width:70%"> /* the rest of the website goes here */
more lorem ipsum than ever before
</div>