“position：fixed”边栏的宽度以百分比设置？ [英] A `position:fixed` sidebar whose width is set in percentage?

问题描述

我已成功使用美丽的

我无法实现的是一个 position：fixed sidebar。

当页面滚动并停留在同一位置时，这是非常方便的（无论如何，你实际上不能把更多的内容到侧边栏，因为它会在一个狭窄的窗口的页面顶部杂乱）。

我的布局疯狂每当我应用位置：固定到列：

彩色块被声明为三列宽，但是当 position：fixed 应用于边栏时， / p>

我认为问题是侧边栏的宽度是相对的，i。 e。设置百分比。由于 position：fixed ，宽度是根据浏览器窗口的宽度而不是其容器来衡量的（虽然我将容器设置为 position：relative

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

也许可以使用JS修复元素的位置？

a href =http://stackoverflow.com/questions/5873565/position-fixed-relative-to-parent-div> width：inherit 解决方案 ，但它对我的情况没有任何帮助。

解决方案

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

 < div class =page> 
< head class =banner> 
< h1>标头< / h1> 
< / header> 
< nav class =navigation> 
< ul class =nav-inner> 
< li>导航链接< / li> 
< / ul> 
< / nav> 
< article class =main> 
< h2>主要内容< / h2> 
< / article> 
< footer class =contentinfo> 
< p>页脚< / p> 
< / footer> 
< / div> 
  

我做的唯一重要的假设是确保在导航边栏附加一个额外的包装。我同时拥有< nav> 标记和< ul> 标记。你可以使用任何你想要的标签，只要侧边栏有两个可以用于结构 - 外部为固定容器，内部为边栏本身。 CSS看起来像这样：

  //一个容器用于标准文档流程中的一切。 
 .page {
 @include container; 
 @include susy-grid-background; 
} 
 
 //边栏的位置固定容器。 
 .navigation {
 @include container; 
 @include susy-grid-background; 
 position：fixed; 
 left：0; 
 right：0; 
 //边栏本身只跨越3列。 
 .nav-inner {@include span-columns（3）; } 
} 
 
 //主内容只需要保留该空间。 
 .main {@include pre（3）; } 
 
 //样式来帮助你看到发生了什么。 
 header，article，.nav-inner，footer {
 padding：6em 0; 
 outline：1px solid red; 
} 
  

干杯。

I've successfully used the beautiful Susy grid system to create a responsive layout similiar to the one of WebDesignerWall.com:

What i failed to implement is a position:fixed sidebar.

Such a sidebar would not scroll when the page is scrolled and stays on the same place. That's fantastically convenient (anyway, you actually can't put more content into the sidebar, because it would clutter the top of page in a narrow window).

My layout goes crazy whenever i apply position:fixed to a column: The colored blocks are declared three-column wide, but stretch further when position:fixed is applied to the sidebar..

I think the problem is that the width of the sidebar is relative, i. e. set in percentage. Due to position:fixed, the width is measured against the width of the browser window, not its container (though i set the container to position:relative).

The question is: how do i make a column fixed to the window while measuring its width against its container, not the viewport?

Maybe it's possible to fix the position of an element with JS?

PS I've tried the width: inherit solution, but it wasn't of any help to my situation.

解决方案

The way to do it is with a second container. I don't know your exact code, but here's an example. Let's assume your structure is something like this:

<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>

The only important assumption I made there was ensuring an extra wrapper around my navigation sidebar. I have both the <nav> tag and the <ul> tag to work with. You can use any tags you want, as long as the sidebar has two that can be used for structure - the outer for a fixed container, and the inner for the sidebar itself. The CSS looks like this:

// 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;
}

Cheers.

这篇关于“position：fixed”边栏的宽度以百分比设置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！