回答:
間違ったプロパティを使用することは別として、あなたはそれをカバーしています。スクロールバーは、任意のプロパティを使用してトリガすることができoverflow
、overflow-x
またはoverflow-y
、それぞれの任意に設定することができvisible
、hidden
、scroll
、auto
、またはinherit
。現在、次の2つを見ています。
auto
-この値は、ボックスの幅と高さを調べます。それらが定義されている場合、ボックスがそれらの境界を超えて拡張することはできません。代わりに(コンテンツがこれらの境界を超える場合)、長さを超えるいずれかの境界(または両方)のスクロールバーが作成されます。
scroll
-この値は、コンテンツが境界セットを超えていなくても、スクロールバーを強制します。コンテンツをスクロールする必要がない場合、バーは「無効」または非インタラクティブとして表示されます。
常に垂直スクロールバーを表示したい場合:
使用する必要がありますoverflow-y: scroll
。この力は、スクロールバーは、それが必要とされているかどうかを、縦軸に対して表示します。実際にコンテキストをスクロールできない場合は、「無効」なスクロールバーとして表示されます。
ボックスをスクロールできる場合にのみスクロールバーを表示したい場合:
だけを使用してくださいoverflow: auto
。デフォルトではコンテンツは現在の行に収まらない場合は次の行に改行するだけなので、水平スクロールバーは作成されません(ワードラップが無効になっている要素上にある場合を除く)。垂直バーの場合、コンテンツを指定した高さまで拡張できます。その高さを超える場合は、垂直スクロールバーを表示して残りのコンテンツを表示しますが、高さを超えない場合はスクロールバーを表示しません。
このようにしてみてください。
<div style="overflow-y: scroll; height:400px;">
使用する overflow-y: auto;
divでします。
また、幅も設定する必要があります。
auto
デフォルトです。通常、これは親の幅の100%を意味しますが、常にそうとは限りません。
代わりにこのコードを使用できます。
<div id="" style="overflow-y:scroll; overflow-x:hidden; height:400px;">
overflow-x:overflow-xプロパティは、コンテンツの左/右端をどう処理するかを指定します-要素のコンテンツ領域をオーバーフローする場合。
overflow-y:overflow-yプロパティは、コンテンツの上/下のエッジをどうするかを指定します-要素のコンテンツ領域をオーバーフローする場合。表示される
値:デフォルト値。コンテンツはクリップされず、コンテンツボックスの外側にレンダリングされる場合があります。hidden:コンテンツはクリップされ、スクロールメカニズムは提供されません。scroll:コンテンツがクリップされ、スクロールメカニズムが提供されます。auto:オーバーフローしたボックスにスクロールメカニズムを提供する必要があります。初期
:このプロパティをデフォルト値に設定します。
inheritこのプロパティを親要素から継承します。
overflow-y: scroll
縦スクロールに使用できます。
<div style="overflow-y:scroll; height:400px; background:gray">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
私にとってこれらすべての答えの問題は、反応がないことでした。親divの高さを固定しなければなりませんでした。また、メディアクエリをいじくりまわすのに大量の時間を費やしたくありませんでした。Angularを使用している場合は、ブートストラップタブセットを使用できます。内部コンテンツをスクロールできるようになり、応答が速くなります。タブを設定するとき$scope.tab = { title: '', url: '', theclass: '', ative: true };
は、次のようにします。...重要なのは、タイトルや画像のアイコンは必要ないということです。次に、次のようにcsでタブのアウトラインを非表示にします。
.nav-tabs {
border-bottom:none;
}
そしてこれ.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border:none;}
と最後に、これを実装しなくてもクリックできる非表示のタブを削除します。.nav > li > a {padding:0px;margin:0px;}
overflow-x
とoverflow-y
やるCSS3、中にあなたは何をしたいです。