1

これがhtmlとcssだけで可能かどうかはわかりませんが、相対コンテナ内に絶対divがあり、コンテナの下に通常のdivが必要です。

HTML:

<div id="container">

    <div id="content">
    </div>

</div>

<div id="footer">

</div>

CSS:

#container{


position:relative;
overflow:auto;



}

#content{

position:absolute;
width:955px;
z-index:1000;


}

目標は、「コンテンツ」div がフッターに重ならないようにすることです。オーバーフロー:自動で動作しましたが、コンテナー div に別の垂直スクロールバーが表示されました。

これを回避する他の方法はありますか？

4

3 に答える 3

1

では、垂直スクロールバーだけを非表示にするのはどうですか:

#container {
    position: relative;
    overflow: auto;
    overflow-y: hidden;
}

?

スクロールバーを非表示にするためのより凝ったものを探している場合は、JavaScript の mousescroll イベントを使用してそれを行うことができます。 http://viralpatel.net/blogs/2009/08/javascript-mouse-scroll-event-down-example.html または、jquery プラグインを使用してスクロールバーを処理することもできます。jScrollpane、Scrollable...

于 2012-08-15T03:10:54.117 に答える
0

absolute位置のある要素にはレイアウトスペースがないため、レイアウトを別の方法で変更する必要があります。このような：

<html> 
<head>
<style>
#container{
position:relative;
}
#absoluteContent{
position:absolute;
width:955px;
z-index:1000;
}
</style>
</head>
<body>
<div id="container">
  <div id="absoluteContent">
    <div id="content">content
    </div>
    <div id="footer">footer
    </div>
  </div>
</div>
</body>
</html>
于 2012-08-15T20:00:00.593 に答える
0

これは HTML と CSS だけで実現できます。http://www.cssstickyfooter.com/の HTML および CSS コードのセットアップは、コードと同じレイアウトを使用し、同様の目標を達成しようとしているため、便利です。

スティッキー フッターを作成するために使用するコードと、以下の Fiddle のコードを組み合わせました。

http://jsfiddle.net/bPybY/1/

于 2012-08-15T03:15:00.110 に答える