我正尝试使用CSS和HTML在线创建小型记事本应用程序。出于某种原因,我的应用程序创建了一个奇怪的小故障,您可以在文本区域中向下滚动足够多,然后向上滚动以找到缺少的标题。
https://jsfiddle.net/2v7ptadh/
我该如何解决这个问题?
这是创建错误的CSS代码。如果你想查看完整的代码,点击上面的JS小提琴链接。使用Textarea滚动时,标题消失
html,
body {
display: block;
box-sizing: border-box;
padding: 0;
margin: 0;
background-color: #888;
height: 100%;
width: 100%;
overflow-y: hidden;
}
div#header {
display: block;
width: 100%;
height: 40px;
border-left: 2px solid rgb(100, 125, 130);
border-top: 2px solid rgb(150, 175, 140);
border-bottom: 2px solid rgb(60, 48, 75);
border-right: 2px solid rgb(80, 84, 90);
background: #bbb;
box-sizing: border-box;
line-height: 40px;
text-align: center;
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
font-weight: 900;
z-index: 4
}
div#app {
z-index: 2;
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
textarea#app-input {
display: block;
box-sizing: border-box;
padding: 4px;
margin: 0;
border: none;
outline: none;
width: 100%;
height: 100%;
line-height: 23px;
font-size: 20px;
resize: none;
}
textarea::selection {
background: #000;
color: #fff;
}
视频问题:http://recordit.co/2AxYmb9XxV
似乎并没有工作。在JSFiddle上测试出来没有overflow-y –