html - 使用两个溢出 : hidden then overflow-y: scroll not working as expected 的 div

Question

我正在尝试使用两个嵌套元素的技巧来使内容滚动而滚动条不可见。

为了说明我的意思:

<div class="outer">
  <div class="inner">
   //content here
  </div>
</div>

内容比外面的div高，所以我想让它滚动。但是我不想要可见的滚动条。所以我设置了以下 CSS:

.outer {
overflow: hidden;
}

.inner {
overflow-y: scroll;
width: 110%;
}

然而，这表现得很奇怪。它在一定程度上起作用 - 内容略微滚动。然而，它并没有滚动到它需要可见的程度，而且内部 div 似乎忽略了外部 div 上的填充。

这是我的完整 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;
    }
}

Answer 1

试试这个(修改有注释):

.innerSection {
    height: 100%;
    overflow-y: auto; /*instead of scroll*/
    width: 110%;
    padding: 20px; /*add padding here*/
}

.section {
    background-color: rgba(51,51,51,0.5);
    border-radius: 5px;
    display: inline-block;
    margin: 1%;
    height: 100%; /*It does not seem to work without specifying a height.*/
    max-height: 42%;
    min-height: 42%;
    overflow: hidden;
    padding: 1%;    
    vertical-align: top;
    width: 28%;
}