我正在尝试在CSS中制作三个独立的滚动布局。独立列不滚动。如果我修改样式，那么整个页面都在滚动。我需要滚动保持左右列不变，而中间列仅滚动。 .HTML
<div>
<div id="nav">
<ul>
<li>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search Quora" name="search" onfocus="quo(this)">
</form>
</div>
</li>
<li>
<a href="#user"><i class="fas fa-user-circle fa-lg"></i></a>
</li>
<li>
<button class="add">Add Question</button>
</li>
</ul>
</div>
<div class="content">
<div id="left">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div id="middle">
<h2>Column 2</h2>
<p>By way of precaution, when all was complete De Rozier made a few short captive excursions, the balloon being fastened to earth by a rope. But all proving satisfactory, he decided to hazard a right away trip on the 21st of November 1783, when he was also to be accompanied by an equally courageous fellow-countryman, the Marquis dArlandes. It would be difficult to conceive a more daring and perilous enterprise than these two brave Frenchmen set themselves. They were to venture, by an untried way, into unknown realms where no mortal had been before; they were to entrust their lives to a frail craft whose capabilities had never yet been tested, and at a giddy height they were to soar aloft with an open fire, which at any moment might set light to the inflammable balloon and hurl them to destruction.</p>
</div>
<div id="right">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
</div>
.CSS
#left{
float: left;
width: 25%;
background: blue;
height: 100%;
overflow: auto;
box-sizing: content-box;
padding: 0.4em;
}
#right {
float: left;
width: 25%;
background: red;
height: 100%;
overflow: auto;
box-sizing: content-box;
padding: 0.4em;
}
#middle {
float: left;
width: 50%;
background: coral;
height: 100%;
overflow: auto;
box-sizing: content-box;
padding: 0.4em;
}
.content{
padding-top:60px;
padding-left:20px;
padding-right:20px;
height: 100%;
}
html, body {
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
问题出在哪里？我使用了这个解决方案，它在那里工作得很好。https://jsfiddle.net/hr6au65b/我认为CSS中的内容风格存在一些问题。
contentdiv 的包含(即父)元素也需要有height: 100%;。它适用于您链接到的示例小提琴，因为body高度为 100%，但您在示例中的正文和内容之间有一个额外的div。
您需要做的就是将height: 100%;添加到第一个外部div。您可以创建一个类，例如height-100pc这种样式：
.height-100pc {
height: 100%;
}
。并将其添加到contentdiv的任何父容器中，例如：
<div class="height-100pc">
<div id="nav"> ... </div>
<div ="content"> <!-- Your columns here --> </div>
</div>
工作示例：
#left {
float: left;
width: 25%;
background: blue;
height: 100%;
overflow: auto;
box-sizing: border-box;
padding: 0.4em;
}
#right {
float: left;
width: 25%;
background: red;
height: 100%;
overflow: auto;
box-sizing: border-box;
padding: 0.4em;
}
#middle {
float: left;
width: 50%;
background: coral;
height: 100%;
overflow: auto;
box-sizing: border-box;
padding: 0.4em;
}
.content {
padding-top: 60px;
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
.height-100pc {
height: 100%;
}
html,
body {
height: 100%;
}
*{box-sizing: border-box; }<div class="height-100pc">
<div id="nav">
<ul>
<li>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search Quora" name="search" onfocus="quo(this)">
</form>
</div>
</li>
<li>
<a href="#user"><i class="fas fa-user-circle fa-lg"></i></a>
</li>
<li>
<button class="add">Add Question</button>
</li>
</ul>
</div>
<div class="content">
<div id="left">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div id="middle">
<h2>Column 2</h2>
<p>By way of precaution, when all was complete De Rozier made a few short captive excursions, the balloon being fastened to earth by a rope. But all proving satisfactory, he decided to hazard a right away trip on the 21st of November 1783, when he
was also to be accompanied by an equally courageous fellow-countryman, the Marquis dArlandes. It would be difficult to conceive a more daring and perilous enterprise than these two brave Frenchmen set themselves. They were to venture, by an untried
way, into unknown realms where no mortal had been before; they were to entrust their lives to a frail craft whose capabilities had never yet been tested, and at a giddy height they were to soar aloft with an open fire, which at any moment might
set light to the inflammable balloon and hurl them to destruction.</p>
</div>
<div id="right">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
</div>请注意，如果此div 位于另一个div 中，则还必须将类应用于它。请参阅以下示例，了解哪些有效，哪些无效：
<!-- This WON'T work: -->
<div>
<div class="height-100pc">
<div id="nav"> ... </div>
<div ="content"> <!-- Your columns here --> </div>
</div>
</div>
<!-- This WON'T work: -->
<div class="height-100pc">
<div>
<div id="nav"> ... </div>
<div ="content"> <!-- Your columns here --> </div>
</div>
</div>
<!-- This WILL work: -->
<div class="height-100pc">
<div class="height-100pc">
<div id="nav"> ... </div>
<div ="content"> <!-- Your columns here --> </div>
</div>
</div>
仅供参考，您应该使用box-sizing: border-box;而不是box-sizing: content-box;- 否则填充将添加到宽度中，总宽度为 100% + 填充，因此框将换行。
你可以通过position:sticky来做到这一点。 首先从body,html中删除overflow: hidden;..然后将display:flex添加到.content类中，并将position:sticky和top:0添加到#reght和#leftID。
#left{
float: left;
width: 25%;
background: blue;
height: 100%;
overflow: auto;
box-sizing: content-box;
padding: 0.4em;
position: -webkit-sticky;
position: sticky;
top: 0;
}
#right {
float: left;
width: 25%;
background: red;
height: 100%;
overflow: auto;
box-sizing: content-box;
padding: 0.4em;
position: -webkit-sticky;
position: sticky;
top: 0;
}
#middle {
float: left;
width: 50%;
background: coral;
height: 100%;
overflow: auto;
box-sizing: content-box;
padding: 0.4em;
}
.content{
padding-top:60px;
padding-left:20px;
padding-right:20px;
height: 100%;
display:flex;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}<div>
<div id="nav">
<ul>
<li>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search Quora" name="search" onfocus="quo(this)">
</form>
</div>
</li>
<li>
<a href="#user"><i class="fas fa-user-circle fa-lg"></i></a>
</li>
<li>
<button class="add">Add Question</button>
</li>
</ul>
</div>
<div class="content">
<div id="left">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div id="middle">
<h2>Column 2</h2>
<p>By way of precaution, when all was complete De Rozier made a few short captive excursions, the balloon being fastened to earth by a rope. But all proving satisfactory, he decided to hazard a right away trip on the 21st of November 1783, when he was also to be accompanied by an equally courageous fellow-countryman, the Marquis dArlandes. It would be difficult to conceive a more daring and perilous enterprise than these two brave Frenchmen set themselves. They were to venture, by an untried way, into unknown realms where no mortal had been before; they were to entrust their lives to a frail craft whose capabilities had never yet been tested, and at a giddy height they were to soar aloft with an open fire, which at any moment might set light to the inflammable balloon and hurl them to destruction.
t all proving satisfactory, he decided to hazard a right away trip on the 21st of November 1783, when he was also to be accompanied by an equally courageous fellow-countryman, the Marquis dArlandes. It would be difficult to conceive a more daring and perilous enterprise than these two brave Frenchmen set themselves. They were to venture, by an untried way, into unknown realms where no mortal had been before; they were
t all proving satisfactory, he decided to hazard a right away trip on the 21st of November 1783, when he was also to be accompanied by an equally courageous fellow-countryman, the Marquis dArlandes. It would be difficult to conceive a more daring and perilous enterprise than these two brave Frenchmen set themselves. They were to venture, by an untried way, into unknown realms where no mortal had been before; they were
</p>
</div>
<div id="right">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
</div>