2

#main div 内にスクロール バーを作成して、ページやタイトルをスクロールせずにスクロールできるようにしようとしていますが、機能しません。私は何が欠けていますか？

私のコードは次のとおりです。

CSS

#topbar {
    height: 40px;
    background-color: blue;
}

#sidebar {
    position: absolute;
    top: 40px;
    bottom: 0px;
    width: 80px;
    overflow: hidden;   
}

#title {
    height:30px;
    background-color: red;
}

#main {
    height: auto;
    overflow: scroll;
}

HTML

<div id="topbar">
    hello
</div>
<div id="sidebar">
    <div id="title">
        title
    </div>
    <div id="main">
        <!-- lots and lots of text-->
    </div>
</div>

ここで JSFiddle の例を見つけることができます: http://jsfiddle.net/PTRCr/

ありがとう

4

7 に答える 7

2

あなたはまだこのプロジェクトに参加していますね。答えもたくさんありますが、あなたが求めていると思うものの実際の例を誰も作っていないようです。

これは、あなたが求めていると私が思うことを実行する（私が望む）実際の例です。

高さが 100% のままになるように、コンテンツ シフト ラッパーを追加しました。この回答からその手法の詳細を読むことができます。また、その絶対配置をすべて削除しました。そうする必要がある理由がわかりません。

各ラッパーは前のコンテンツに合わせて調整されます。最初は高さ 40 ピクセルのトップ バー、次に 30 ピクセルのタイトルです。

この例は、サイズ変更時にスクロールバーが同じベースラインに留まるという以前の仕様にも従う必要があります。

プレビュー

ご覧のとおり、以下のコードでは、他の人が信じていることにもかかわらず、CSS のみのソリューションを実行することが可能です。CSS 保持のバッグから少しのトリックが必要です。

男、私はそのような馬鹿です。

例| コード

HTML

<div id='container'>
    <div id="top-bar">hello</div>
    <div class="wrapper">
        <div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div><div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div><div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div><div class="side-bar">
            <div class="title">title</div>
            <div class="content_wrapper">
                <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div>
            </div>
        </div>
    </div>
</div>

CSS

body, html{
    height:100%;
    width: 100%;
    line-height: 100%;
    margin: 0;          /* Normalization */
    padding: 0;         /* Normalization */
}

div{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#container{
    height:100%;
    width: 100%;
    text-align: center;
    overflow: auto;
}

#top-bar{
    height: 40px;
    line-height: 40px;
    border: 1px solid lightblue;
    background: blue;
    color: white;
    text-align: center;
}

.side-bar {
    width: 120px;
    height: 100%;
    text-align: center;
    color: white;
    border: 1px solid DarkOrchid;
    display: inline-block;
    vertical-align: top;
}

.title {
    height:30px;
    line-height: 30px;
    border: 1px solid salmon;
    background: red;
}

.wrapper{
    margin-top: -40px;
    padding-top: 40px;
    height: 100%;
    width: 100%;

    white-space: nowrap;
}

.wrapper > div{
    white-space: normal;
}

.content_wrapper{
    margin-top: -30px;
    padding-top: 30px;
    height: 100%;
}

.content{
    color: black;
    height: 100%;
    overflow: auto;
}
于 2012-04-12T11:22:32.447 に答える
1

スクロール可能にしたい要素は、

  • 高さと幅を定義する
  • 属性を持っているoverflow:auto

例：

.scrollArea {
 width: 275px;
 height: 100px;
 padding-left: 5px;
 padding-right: 5px;
 border-color: #6699CC;
 border-width: 1px;
 border-style: solid;
 float: left;
 overflow: auto;
}
于 2012-04-11T11:42:37.297 に答える
1

CSS は、ドキュメントのスタイル設定のみを目的とするスタイルシートです。既存の要素を調査することはできません。

唯一の方法は、div のサイズを固定する必要があるか、JavaScript を使用して正確な高さを調べる必要があるかです。これを CSS で行う方法は、他のユーザーによって既に提示されています。

そこで、jQuery を使用して実行できる方法を次に示します。

$("#main").height($(document).innerHeight()-$("#title").outerHeight() - $("#topBar").outerHeight());

デモ

于 2012-04-11T11:57:33.073 に答える
0

あなたの場合、CSSを変更します。

#sidebar {
position: absolute;
top: 40px;
bottom: 40px;
width: 80px;
overflow: scroll;   
}
于 2012-04-11T11:46:14.207 に答える
0

の を定義してheight、<div id="main"スクロールバーを表示する必要があります。javascriptまたはjqueryを使用して計算するかどうか。

   #topbar {
    height: 40px;
    background-color: blue;
}

#sidebar {
    position:absolute;
    top: 40px;  
    bottom: 40px;
    width: auto;
    height:200px;
    overflow: hidden;   
}

#title {
    height:30px;
    background-color: red;
}

#main {
    height: 100px;
    width: 100%;
    overflow:auto;
}

この更新されたjsFiddleを確認してください。

于 2012-04-11T11:47:02.427 に答える
0

#main の高さを設定する必要があります。http://jsfiddle.net/PTRCr/7/で動作しています

#main {
    height: 100px;
    overflow-y: scroll;
}
于 2012-04-11T16:42:43.660 に答える
0

px#title の高さが、親コンテナーのいずれかまたはパーセンテージでわかっている場合にのみ可能です

#jsFiddle で設定されたpx タイトル

#main {
    position:absolute;
    top:30px; /* set this to whatever you have set the height of #title to*/
    bottom:0px;
    overflow-y: scroll;
}

#title set as % jsFiddle - IE/FF/Chrome でテスト済み

于 2012-04-12T10:20:32.363 に答える