1

次の要素を含む Web ページ レイアウトを作成しようとしています。 1. 左側にメニュー、右側にメイン コンテンツがある 2 列の設定。2. 右側の列の上部に固定された「機能バー」。固定され、常に表示されます。

キャッチは次のとおりです。

  1. 2 つの列の高さがブラウザー ウィンドウの解像度を超えた場合に、2 つの列を個別にスクロールしたい
  2. 私が使用しているコンテンツ管理システムは、ページの上部に固定ペインを追加して、コントロール オプションを表示します。

私が求めているレイアウトを視覚的に表現する画像を作成しました。これが意味をなすのに役立つことを願っています。

参考レイアウトイメージ

このレイアウトを作成しようとしている現在の場所は次のとおりです

<div class="CMS-Admin-Bar"></div>
<div class="total-wrapper">
    <div class="left-pane">
        <div class="menu-pane"></div>
    </div>
    <div class="right-pane">
        <div class="Function-Pane"></div>
        <div class="Content-Pane"></div>
    </div>
</div>

.CMS-Admin-Bar{
position:fixed;
height:43px;
left:0;
top:0;
width:100%;
z-index:10;
}

.total-wrapper{
position:relative;
}

.left-pane{
position:absolute;
top:0;
bottom:0;
left:0;
height:100%;
width:283px;
z-index:8;
}

.right-pane{
position:fixed;
top:0;
left:283px;
right:0;
bottom:0;
overflow:auto;
}

.Function-Pane{
position:fixed;
z-index:8;
top:0px;
left:283px;
height:43px;
}

この CSS には、いくつかの問題があります。

  1. 管理者がログインすると、「CMS-Admin-Bar」が「Function-Pane」を覆います。
  2. 「Function-Pane」の右側の 283px が切り取られています。流動的な幅を保ちながら、画面に収まるようにこの固定 div が必要です。

私が十分に説明できたことを願っています。あなたの助けと時間をありがとう！

アレックス

4

1 に答える 1

0

これをチェックしてください：http://codepen.io/anon/pen/kEhny UPDATED AGAIN

管理者がログインすると、「CMS-Admin-Bar」が「Function-Pane」を覆います 。CMS-Admin-Bar の高さを見つけて、親要素にパディングを追加する必要があります (これの本文である可能性があります)。 case) または、total-wrapper 要素に上部マージンを追加します。

「Function-Pane」の右側の 283px が切り取られています。流動的な幅を保ちながら、画面に収まるようにこの固定 div が必要です。 今ではペンで動作するようです。ただし、このレイアウトは実際にはレスポンシブではないことに注意してください。

于 2013-05-09T20:32:44.277 に答える