1

html/css に問題があります。

こんにちは、このデザインがあります:

HHHHHHHHHH
CCCCCCCSSS
CCCCCCCSSS
CCCCCCCSSS
CCCCCCCSSS
FFFFFFFFFF

H はヘッダー、F フッター、C コンテンツ、S はサイドバーです。

ヘッダーを上部に、フッターを下部に固定したので、コンテンツの量に関係なく、ヘッダーとフッターは常に表示されます。

サイドバーもデータ量が少ないので固定したいです。コンテンツが大きすぎてページの一番下までスクロールする必要がある場合でも、サイドバーをヘッダーのすぐ下に置いて、常に表示されるようにしたいと考えています。

こんにちは、このコードがあります：

.container {
    min-height:100%;
    position:relative;
}
.header {  
    position: fixed;
    top: 0;
    background:#f1f1f1;
    width: 100%;
    margin: 0px auto;
}
.sidebar {
    float: right;
    width: 300px;
    background-color: #FFF;
    padding:10px;
    padding-bottom: 100px;
    padding-top: 50px;
}
.content {
    width: 960px;
    padding:10px;
    padding-bottom: 100px;
    padding-top: 50px;
    margin-left: 100px;
}
.footer {
    position:fixed;
    bottom:0;
    width:100%;
    height:60px; 
    background:#f1f1f1;
    text-align: center;
    vertical-align: middle;
}

何か案は？

4

3 に答える 3

2

正確な位置を示しながら、サイドバーの位置を「固定」にしてみてください。したがって、CSSのdivクラス「サイドバー」に以下を追加します。

position: fixed;
left: 1110px;
top: 30px;

上下の位置を調整して、すべてを好みに合わせることができますが、これにより、サイドバーが大まかに正しい位置に配置されます。:)

于 2012-12-02T05:49:17.027 に答える
2

もう 1 つ考慮する必要があるのは、ユーザーの画面解像度が幅 1110 ピクセル未満の場合、サイドバーがまったく表示されないことです。パーセンテージを使用して配置を決定する、より流動的なアプローチを試してみることをお勧めします。または、右側に配置したい場合は、左ではなく「右:」属性を実際に使用する必要があります。

于 2012-12-02T07:13:26.840 に答える
0

2019 年に早送りすると、これを で実行できるようになりましたposition: sticky。

このように、サイド バーは通常どおりスクロールし、スクロールして見えなくなるまでスクロールします。 https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning

最初の実験的なサポートは 2013 年に行われ、多数のサポートは 2017 年に行われ、現在のサポートは 93% です。 https://caniuse.com/#feat=css-sticky

#example-element {
  position: -webkit-sticky;
  position: sticky;
  top: 20px;
}

#example-element { background-color: #ff0; border: 3px solid red; z-index: 1; }
#example-element-container { max-width: 15em; }
.box { background-color: rgba(0, 0, 255, .2);  border: 3px solid #00f; float: left; width: 65px; height: 65px; }
.box+.box { margin-left: 10px }
.clear { clear: both; padding-top: 1em }
<div id="example-element-container">
  <p>In this demo you can control the <code>position</code> property for the yellow box.</p>
  <div class="box"></div>
  <div class="box" id="example-element"></div>
  <div class="box"></div>
  <p class="clear">To see the effect of <code>sticky</code> positioning, select the <code>position: sticky</code> option and scroll this container.</p>
  <p>The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in <code>top</code>), and will then stop scrolling, so it stays visible.</p>
  <p>The rest of this text is only supplied to make sure the container overflows, so as to enable you to scroll it and see the effect.</p>
  <hr>
  <p>Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet
    whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.</p>
</div>

于 2019-12-16T12:53:45.013 に答える