40

このDemo Templateから始めて、このレイアウトを作成したいと思います:

ここに画像の説明を入力

しかし、次の問題があります。

  • 2 つのサイドバーは、スクロール可能なコンテンツ div 内に含まれていません。
  • コンテンツ div は固定サイズを取りません
  • スクロール可能なコンテンツがオーバーフローしてもスクロールバーが表示されない
  • ブラウザのメイン スクロールバーを使用する場合に推奨されます

誰かがこれらの問題を解決するのを手伝ってくれますか?

4

2 に答える 2

48

使用するdisplay:grid

これは、選択したブラウザでサポートされている場合とサポートされていない場合がある CSS のいくつかの新機能を使用します。これらには、グリッド レイアウト、CSS 変数、およびposition:sticky. CSS 変数は静的な値で回避でき、Grid/position:stickyは で適切に劣化でき@supportsます。

/* Remove unnecessary margins/padding */
html, body { margin: 0; padding: 0 }

.wrapper {
  display: grid;
  /* Header and footer span the entire width, sidebars and content are fixed, with empty space on sides */
  grid-template-areas:
    "header header header header header"
    "empty_left sidebar_1 content sidebar_2 empty_right"
    "footer footer footer footer footer";
  /* Only expand middle section vertically (content and sidebars) */
  grid-template-rows: 0fr 1fr 0fr;
  /* 100% width, but static widths for content and sidebars */
  grid-template-columns: 1fr 100px 400px 100px 1fr;
  /* Force grid to be at least the height of the screen */
  min-height: 100vh;
}
.header {
  grid-area: header;

  /* Stick header to top of grid */
  position: sticky;
  top: 0;
  /* Ensure header appears on top of content/sidebars */
  z-index: 1;

  /* General appearance */
  background-color: #FCFF34;
  text-align: center;
  font-size: 1rem;
  line-height: 1.5;
  padding: 1rem;
}
/* Save header height to properly set `padding-top` and `margin-top` for sticky content */
:root {
  --header-height: calc(1rem * 1.5 + 1rem * 2);
}

.sidebar-1 {
  grid-area: sidebar_1;
}
.sidebar-2 {
  grid-area: sidebar_2;
}
.sidebar-1,
.sidebar-2 {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;

  /* Styling to match reference */
  background-color: #BC514F;
}

.content {
  grid-area: content;

  /* General appearance */
  background-color: #99BB5E;
}
.footer {
  grid-area: footer;

  /* Stick footer to bottom of grid */
  position: sticky;
  bottom: 0;

  /* General appearance */
  background-color: #FCFF34;
  text-align: center;
  font-size: .8rem;
  line-height: 1.5;
  padding: .5rem;
}
/* Save footer height to properly set `bottom` and `min-height` for sticky content */
:root {
  --footer-height: calc(.8rem * 1.5 + .5rem * 2);
}

.sticky-spacer {
  flex-grow: 1;
}
.sticky-content {
  position: sticky;
  bottom: var(--footer-height);
  min-height: calc(100vh - var(--footer-height));
  box-sizing: border-box;

  --padding: 10px;
  padding:
    calc(var(--header-height) + var(--padding))
    var(--padding)
    var(--padding);
  margin-top: calc(0px - var(--header-height));
}
<div class="wrapper">
<div class="header">Header (Absolute)</div>
<div class="sidebar-1">
  <div class="sticky-spacer"></div>
  <div class="sticky-content">Sidebar 1 Absolute position, Fixed width</div>
</div>
<div class="content">
  <div class="sticky-spacer"></div>
  <div class="sticky-content">
    Scrollable content<br><br>
    line 1<br><br>
    line 2<br><br>
    line 3<br><br>
    line 4<br><br>
    line 5<br><br>
    line 6<br><br>
    line 7<br><br>
    line 8<br><br>
    line 9<br><br>
    line 10<br><br>
    line 11<br><br>
    line 12<br><br>
    line 13<br><br>
    line 14<br><br>
    line 15<br><br>
    line 16<br><br>
    line 17<br><br>
    line 18<br><br>
    line 19<br><br>
    line 20
  </div>
</div>
<div class="sidebar-2">
  <div class="sticky-spacer"></div>
  <div class="sticky-content">
    Sidebar 2 Absolute position, Fixed width<br><br>
  line 1<br><br>
  line 2<br><br>
  line 3<br><br>
  line 4<br><br>
  line 5<br><br>
  line 6<br><br>
  line 7<br><br>
  line 8<br><br>
  line 9<br><br>
  line 10
  </div>
</div>
<div class="footer">Footer (Absolute)</div>
</div>

メインコンテンツコンテナのスクロールバー

コンテンツ ボックス (サイドバーを含む) は、任意の幅 (パーセント、ピクセルなど) に設定できます。スクロール可能なコンテンツ領域のみがスクロールされます (サイドバー/フッター/ヘッダーはボックスからはみ出します)。小さなデバイスでコンテンツが隠れないように、メディア クエリをいくつか追加してサイドバーから抜け出すことをお勧めします。またはmin-height、コンテンツ ボックスに を設定min-widthし、body.

html, body {
    height:100%;
    margin:0;
    padding:0;
}
header{
    width: 100%;
    background: yellow;
    position: fixed; 
    top: 0;
    height: 60px !important;
    opacity:.8;
}

.content {
    position:relative;
    height: 100%;
    width:600px; /* Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1, .sidebar2 {
    background: red;
    top:60px;
    bottom:30px;
    width: 100px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1 {
    left:0;
}

.sidebar2 {
    right: 0;
}

#scrollable2 {
    background:green;
    height: 100%;
    min-width: 300px;
    margin-left: 100px;
    margin-right: 100px;
    overflow:auto;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed; 
    bottom: 0;
    height: 30px;
}
<!-- Always on top: Position Fixed-->
<header>
    header
</header>
<!-- Fixed size after header-->
<div class="content">
    <!-- Always on top. Fixed position, fixed width, relative to content width-->
    <div class="sidebar1">
        sidebar-left
    </div>
    <!-- Scrollable div with main content -->
    <div id="scrollable2">
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
    </div>
    <!-- Always on top. Fixed position, fixed width, relative to content width -->
    <div class="sidebar2">
        sidebar-right
    </div>
</div>
<!-- Always at the end of the page -->
<footer>
    footer
</footer>

ブラウザのメイン スクロールバーを使用する

ブラウザのメイン スクロールバーを使用することは可能ですが、サイドバーもページと共にスクロールします。

html, body {
    height:100%;
    margin:0;
    padding:0;
}
header{
    width: 100%;
    background: yellow;
    position: fixed; 
    top: 0;
    height: 60px !important;
    z-index:100;
}

.content {
    position:relative;
    min-height: 100%;
    width:600px; /* Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
}

.sidebar1, .sidebar2 {
    background: red;
    height:100%;
    width: 100px;
    top:0;
    padding-top:60px;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1 {
    
    left:0;
    
}

.sidebar2 {
    right: 0;
}

#scrollable2 {
    height:100%;
    background:green;
    min-width: 300px;
    margin-left: 100px;
    margin-right: 100px;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed; 
    bottom: 0;
    height: 30px;
}
<!-- Always on top: Position Fixed-->
<header>
    header
</header>
<!-- Fixed size after header-->
<div class="content">
    <!-- Always on top. Fixed position, fixed width, relative to content width-->
    <div class="sidebar1">
        sidebar-left
    </div>
    <!-- Scrollable div with main content -->
    <div id="scrollable2">
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
        content-main<br>
    </div>
    <!-- Always on top. Fixed position, fixed width, relative to content width -->
    <div class="sidebar2">
        sidebar-right
    </div>
</div>
<!-- Always at the end of the page -->
<footer>
    footer
</footer>

于 2012-04-07T17:49:30.780 に答える
2

EDIT
1.修正したいdivのpositionプロパティを追加します。 2.本体のプロパティを保持します。absolute
overflowauto

注: ボディの z-index を -1 に設定すると、ボディの残りの部分にアクセスできなくなります。
参考： http: //limpid.nl/lab/css/fixed/

于 2013-03-05T10:11:09.580 に答える