Question

我正在尝试构建类似Google文档页面的内容，但当我在我满意的div上添加一些文字时，滚动条无法正常工作。

我只想添加一些文字，并能够滚动条滚动。

以下是代码：

<html>
<head>
    <title></title>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #EEE;
            overflow: hidden;
        }

        #contentBox {
            padding-top: 20px;
            padding-bottom: 20px;
            background-color: #EEE;
            width: auto;
            overflow-y: scroll;
        }

        #textBox {
            width: 60%;
            min-height: 982px;
            border: 1px #C9C9C9 solid;
            padding: 12px;
            margin-left: 20%;
            background-color: #FFFFFF;
            outline-style: none;
            white-space: pre-line;
            word-wrap: break-word;
        }
    </style>
</head>
<body>
    <div id="contentBox">
        <div id="textBox" contenteditable="true" spellcheck="false"></div>
    <div>
</body>
</html>

Answer 1

编辑 - 第二次尝试

好的，这可以安排。我刚刚为你修复了first FIDDLE，因为它在文字溢出时失去了白色背景。

我也做了一个second FIDDLE，因为你说它必须是一个＆＃34;外面的卷轴＆＃34;而且我试图找出那是什么。

原始答案

我可以向您推荐的是在尝试实现溢出之前了解溢出的工作原理。

此属性取决于父母的身高，而父母的身高可能取决于其父亲的身高等等，因此您的修复可能会很远。因此，有时候这个属性可能会越来越难以调试你的div嵌套越多。

HTML：

<h1 id="title">Must be outside scroll</h1>

<div id="contentBox">
    <div id="textBox" contenteditable="true" spellcheck="false"></div>
</div>

CSS：

html {
    height: 100%;
}
body {
    display: inline;
    position: relative;
    margin: 0;
    background-color: #EEE;
    height: 100%;
}
#title {
    text-align: center;
}
#contentBox {
    background-color: #EEE;
    margin-left: 20%;
    width: 60%;
    height: calc(100% - 100px);
    overflow-y: scroll;
    overflow-x: auto;
    border: 1px #C9C9C9 solid;
}
#textBox {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    padding: 12px;
    background-color: #FFFFFF;
    outline-style: none;
    white-space: pre-line;
    word-wrap: break-word;
}

old FIDLEE

Answer 2

删除正文overflow: hidden; 并#contentBox添加overflow-y: hidden;

body {
    margin: 0;
    background-color: #EEE;

   }
#contentBox {
    padding-top: 20px;

    padding-bottom: 20px;
    background-color: #EEE;
    width: auto;
    overflow-y: hidden;
}
#textBox {
    width: 60%;
    min-height: 982px;
    border: 1px #C9C9C9 solid;
    padding: 12px;
    margin-left: 20%;
    background-color: #FFFFFF;
    outline-style: none;
    white-space: pre-line;
    word-wrap: break-word;
}

当contenteditable为true时，div滚动条不起作用

2 个答案: