9

私は美しいSusyグリッドシステムを使用して、 WebDesignerWall.com の1つに似たレスポンシブレイアウトを作成することに成功しました。ここに画像の説明を入力してください

実装に失敗したのはposition:fixedサイドバーです。

このようなサイドバーは、ページがスクロールされたときにスクロールせず、同じ場所にとどまります。これは非常に便利です（とにかく、狭いウィンドウでページの上部が乱雑になるため、実際にはサイドバーにこれ以上コンテンツを入れることはできません）。

position:fixed列に 適用すると、レイアウトがおかしくなりますここに画像の説明を入力してください 。色付きのブロックは3列幅と宣言position:fixedされていますが、サイドバーに適用するとさらに伸びます。

問題は、サイドバーの幅が相対的、つまりパーセンテージで設定されていることだと思います。のためposition:fixed、幅は、コンテナではなく、ブラウザウィンドウの幅に対して測定されます（コンテナをに設定しましたがposition:relative）。

問題は、ビューポートではなく、コンテナに対して幅を測定しながら、ウィンドウに固定された列を作成するにはどうすればよいですか？

たぶんJSで要素の位置を固定することは可能ですか？

PS私はwidth: inherit解決策を試しましたが、それは私の状況には何の助けにもなりませんでした。

4

5 に答える 5

11

それを行う方法は、2番目のコンテナを使用することです。正確なコードはわかりませんが、例を示します。あなたの構造が次のようなものであると仮定しましょう：

<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>ます。サイドバーに構造に使用できる2つのタグ（固定コンテナー用の外側とサイドバー自体用の内側）がある限り、任意のタグを使用できます。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;
}

乾杯。

于 2012-09-30T05:22:06.287 に答える
1

できません。固定位置の要素がコンテナから切り離されているか、position: relativeまたは切り離されていませんposition: relative。幅を絶対値に設定するだけです。コンテンツの幅は常に760ピクセルのようですよね。

于 2012-09-29T15:08:57.200 に答える
1

たぶんJSで要素の位置を固定することは可能ですか？

はい、しかしそれは退屈であり、理想的な解決策ではありません。

代わりに、CSSで直接パーセンテージを使用するのではなく、JavaScriptを使用して適切な幅を計算し、割り当てます。基本的な概要は次のとおりです。

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は単なるプレースホルダーであり、実際のページに合わせて変更する必要があります。

于 2012-09-29T15:31:56.787 に答える
-1

数学だけ使ってみませんか？=）

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*/
}
于 2012-09-29T17:00:50.993 に答える
-1

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>
于 2012-09-29T17:04:25.060 に答える