我正在尝试仅使用 CSS 和 HTML 在线创建一个小型记事本应用程序。出于某种原因,我的应用程序产生了一个奇怪的故障,您在文本区域中向下滚动到足够远,然后向上滚动会发现标题丢失。
https://jsfiddle.net/2v7ptadh/
我该如何解决这个问题?
这是造成错误的 CSS 代码。如果您想查看完整代码,请单击上面的 JS Fiddle 链接。
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;
}
最佳答案
如果您要将 html/body
设置为 height: 100%; overflow-y: hidden;
然后 #app
不应该是 height: 100%
- 将其更改为 height: calc(100% - 40px )
其中 40px
是页眉高度。这会将所有内容保留在视口(viewport)中。
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
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: calc(100% - 40px);
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;
}
<div id="header">ONLINE NOTEPAD</div>
<div id="app">
<textarea id="app-input"></textarea>
</div>
关于html - 使用 Textarea 滚动时标题消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44233083/