2つのネストされた要素のトリックを使用してスクロールバーを表示せずにコンテンツをスクロールしようとしています。オーバーフローで2つのdivを使用する:hidden、overflow-y:スクロールが期待どおりに動作しない
私が何を意味するか説明するために:
<div class="outer">
<div class="inner">
//content here
</div>
</div>
をコンテンツには、外側のdivよりも高くなっているので、私はそれがスクロールしたいです。しかし、私は目に見えるスクロールバーが欲しくない。だから私は次のCSSを設定しました:
.outer {
overflow: hidden;
}
.inner {
overflow-y: scroll;
width: 110%;
}
しかし、これはかなり奇妙に動作しています。それはある範囲で動作します。コンテンツはわずかにスクロールします。しかし、それは目に見える必要がある限りスクロールせず、内側divは外側divのpaddingを無視するようです。
これは私の完全なCSSです。関連ビットは、この(修正がコメントされている)試し.SECTIONと.innerSection
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
html, body {
background-color: #330033;
height: 100%;
width: 100%;
color: #FFFFCC;
font-family: 'Andika', sans-serif;
font-size: 20px;
font-weight: 400;
text-align: center;
}
a:link{text-decoration: none; color: #FFFFCC;}
a:visited{text-decoration: none; color: #FFFFCC;}
a:hover{text-decoration: none; color: white; font-weight: bold;}
form {
margin: 0 auto;
max-width: 500px;
padding-bottom: 1em;
text-align: left;
}
h1 {
font-size: 72px;
}
h2 {
font-weight: 600;
}
h3 {
font-size: 64px;
}
.imgLink {
border-radius: 5px;
margin: 1%;
max-width: 50%;
}
.innerSection {
height: 100%;
overflow-y: scroll;
width: 110%;
}
.section {
background-color: rgba(51,51,51,0.5);
border-radius: 5px;
display: inline-block;
margin: 1%;
max-height: 42%; /*simplifies responsive height lower down*/
min-height: 42%;
overflow: hidden;
padding: 1%;
vertical-align: top; /*otherwise sections move down when content added*/
width: 28%;
}
#desktopTitle {
background-color: #330033;
}
#tabletTitle {
display: none;
}
@media screen and (max-width: 1020px), screen and (max-height: 925px) {
.section {
display: block;
max-height: fit-content;
min-height: 25%;
width: 94%;
}
#contact {
margin-top: 5%;
}
#desktopTitle {
display: none;
}
#resources {
display: none;
}
#tabletTitle {
display: block;
}
#twitter {
display: none;
}
}
@media screen and (max-width: 600px) {
#tabletTitle {
font-size: 48px;
}
}
を?? –
私はそれを持っているか、それを取り除いても差がないことがわかります - それはその属性を完全に無視しているようです(何が起こったかを見るために50%に設定しました - 違いはありませんでした)。 –