Html 如果 div 延伸到视口底部以下，则添加滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4345285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Adding a scroll bar if div extends below bottom of view port
提问by Richard H
I have a <div>in my page which contains a <table>of varying number of rows, i.e varying height:
我有一个<div>在我的网页，其中包含<table>不同的行数，即不同的高度：
<html>
<head></head>
<body>
<div>
<table>
<tr>...
<tr>...
...
</table>
</div>
</body>
</html>
At the moment if the table content is long enough, the div extends below the bottom of the page (view port). I want to stop the div extending below the bottom of the page, and add a scroll bar. I can add scroll bars if the div height is fixed no problem with overflow: scroll. But I want the div height to fit to however the user has sized his browser window.
目前，如果表格内容足够长，div 会延伸到页面底部（视口）下方。我想停止延伸到页面底部下方的 div，并添加一个滚动条。如果 div 高度固定没有问题，我可以添加滚动条overflow: scroll。但我希望 div 高度适合用户调整浏览器窗口的大小。
Any ideas how to achieve this? I do not care or need the div to extend to the bottom of the page if there is no table content. Preferably a pure css solution as opposed to using javascript to fix the div height.
任何想法如何实现这一目标？如果没有表格内容，我不在乎或不需要 div 扩展到页面底部。最好是纯 css 解决方案，而不是使用 javascript 来修复 div 高度。
Thanks
谢谢
回答by Martin Algesten
How about a wrapper with overflow auto and some 100% trickery. I.e. some variant of this:
一个带有自动溢出和一些 100% 诡计的包装器怎么样。即这个的一些变体：
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>100% thing</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
height: 100%;
width: 200px;
overflow: auto;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<p>To Sherlock Holmes she is always <i>the</i> woman. I have seldom heard
him mention her under any other name. In his eyes she eclipses
and predominates the whole of her sex. It was not that he felt
any emotion akin to love for Irene Adler. All emotions, and that
one particularly, were abhorrent to his cold, precise but
admirably balanced mind. He was, I take it, the most perfect
reasoning and observing machine that the world has seen, but as a
lover he would have placed himself in a false position. He never
spoke of the softer passions, save with a gibe and a sneer. They
were admirable things for the observer—excellent for drawing the
veil from men’s motives and actions. But for the trained reasoner
to admit such intrusions into his own delicate and finely
adjusted temperament was to introduce a distracting factor which
might throw a doubt upon all his mental results. Grit in a
sensitive instrument, or a crack in one of his own high-power
lenses, would not be more disturbing than a strong emotion in a
nature such as his. And yet there was but one woman to him, and
that woman was the late Irene Adler, of dubious and questionable
memory.
<p>
I had seen little of Holmes lately. My marriage had drifted us
away from each other. My own complete happiness, and the
home-centred interests which rise up around the man who first
finds himself master of his own establishment, were sufficient to
absorb all my attention, while Holmes, who loathed every form of
society with his whole Bohemian soul, remained in our lodgings in
Baker Street, buried among his old books, and alternating from
week to week between cocaine and ambition, the drowsiness of the
drug, and the fierce energy of his own keen nature. He was still,
as ever, deeply attracted by the study of crime, and occupied his
immense faculties and extraordinary powers of observation in
following out those clues, and clearing up those mysteries which
had been abandoned as hopeless by the official police. From time
to time I heard some vague account of his doings: of his summons
to Odessa in the case of the Trepoff murder, of his clearing up
of the singular tragedy of the Atkinson brothers at Trincomalee,
and finally of the mission which he had accomplished so
delicately and successfully for the reigning family of Holland.
Beyond these signs of his activity, however, which I merely
shared with all the readers of the daily press, I knew little of
my former friend and companion.
<p>
One night—it was on the twentieth of March, 1888—I was
returning from a journey to a patient (for I had now returned to
civil practice), when my way led me through Baker Street. As I
passed the well-remembered door, which must always be associated
in my mind with my wooing, and with the dark incidents of the
Study in Scarlet, I was seized with a keen desire to see Holmes
again, and to know how he was employing his extraordinary powers.
His rooms were brilliantly lit, and, even as I looked up, I saw
his tall, spare figure pass twice in a dark silhouette against
the blind. He was pacing the room swiftly, eagerly, with his head
sunk upon his chest and his hands clasped behind him. To me, who
knew his every mood and habit, his attitude and manner told their
own story. He was at work again. He had risen out of his
drug-created dreams and was hot upon the scent of some new
problem. I rang the bell and was shown up to the chamber which
had formerly been in part my own.
</div>
</div>
</body>
</html>
回答by Ricardo Lima
Css class to have a nice Divwith scroll
CSS 类Div与滚动很好
.DivToScroll {
background-color: #F5F5F5;
border: 1px solid #DDDDDD;
border-radius: 4px 0 4px 0;
color: #3B3C3E;
font-size: 12px;
font-weight: bold;
left: -1px;
padding: 10px 7px 5px;
}
.DivWithScroll {
height:120px;
overflow:scroll;
overflow-x:hidden;
}
