http://jsfiddle.net/g93bswco/ 我在这里举了一个简单的例子。
你可以看到我是否向下滚动我的内容，侧栏只会显示前100％的屏幕。我希望它扩展到与我的主要内容相同的高度。 我在这里查看了许多旧问题，但我仍然没有弄清楚。如果你能在我的jsfiddle上做到这一点会很棒。谢谢！
#header {
margin: 0;
padding: 10px;
text-align: right;
background: blueviolet;
}
#content {
margin-left: 190px;
padding: 10px;
}
#sidebar {
float: left;
width: 190px;
height: 100%;
background: orange;
position: absolute;
}
#footer {
margin: 0;
padding: 10px;
text-align: center;
}<div id="header">
login
</div>
<div id="sidebar">
</div>
<div id="content">
many lines article here, see the link above
Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet.
</div>
<div id="footer">
</div>
答案 0 :(得分：1)
如果您有可能，可以重新构建HTML以将内容和侧边栏包装在容器中。这个容器具有display: flex属性和align-items: stretch应该可以帮到你。
#header {
margin: 0;
padding: 10px;
text-align: right;
background: blueviolet;
}
#container {
display: flex;
align-items: stretch;
}
#sidebar {
flex: none;
width: 190px;
background: orange;
}
#content {
padding: 10px;
}
#footer {
margin: 0;
padding: 10px;
text-align: center;
}<div id="header">
login
</div>
<div id="container">
<div id="sidebar">
</div>
<div id="content">
Lorem ipsum dolor sit amet
</div>
</div>
<div id="footer">
©
</div>
答案 1 :(得分：1)
我不知道是否允许这样做，但我为new parent div和sidebar添加了content。然后很容易设置其余部分，因为parent将采用child（内容）的高度，然后侧边栏高度将与内容的高度相同，因为侧边栏定义为height:100%（父亲身高的100％）。
以下是代码和Fiddle：
#header
{
margin: 0;
padding: 10px;
text-align: right;
background: blueviolet;
}
#content
{
position:relative;
float:right;
margin-left: 190px;
padding: 10px;
}
#middle
{
position:relative;
float:left;
margin:0;
padding:0;
width:100%;
}
#sidebar
{
position:relative;
float: left;
width: 190px;
height: 100%;
background: orange;
position: absolute;
}
#footer
{
margin: 0;
padding: 10px;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="header">
login
</div>
<div id="middle">
<div id="sidebar">
</div>
<div id="content">
Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet.
Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet.
Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet.
Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet.
</div>
</div>
<div id="footer">
</div>
</body>
</html>
答案 2 :(得分：1)
我建议使用随CSS3引入的Flexbox。它允许您将元素彼此相邻放置并控制它们的对齐。 css-tricks.com上有一个有用的摘要：https://css-tricks.com/snippets/css/a-guide-to-flexbox/
为了准备flexbox的标记，我在侧边栏周围添加了一个包裹main元素，它将接收flexbox样式，删除了#content的边距以及用于定位两个div的浮点数彼此相邻。最后，我将display: flex和align-items: stretch添加到包装器中。这使CSS更小，更容易理解。
#header {
margin: 0;
padding: 10px;
text-align: right;
background: blueviolet;
}
main {
display: flex;
align-items: stretch;
}
#content {
padding: 10px;
}
#sidebar {
width: 190px;
background: orange;
}
#footer {
margin: 0;
padding: 10px;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="header">
login
</div>
<main>
<div id="sidebar">
Placeholder
</div>
<div id="content">
Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family
Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your
desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited
photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS
or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere,
across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect
photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space
on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos web app. Access your content anywhere, across desktop, mobile, and tablet. Prime Photos: Prime Photos offers free online photo storage to Prime
members, who can save and share unlimited photos on desktop, mobile, and tablet. Share unlimited photo storage with up to 5 people, and collect photos together in the Prime Photos Family Vault. With the Prime Photos mobile and web apps, photo
backup has never been easier. Use the iOS or Android mobile apps to auto-save your photos, then safely delete them from your phone to free up space on your device. Upload photos from your desktop computer, and store them safely all in Prime Photos
web app. Access your content anywhere, across desktop, mobile, and tablet.
</div>
</main>
<div id="footer">
</div>
</body>
</html>