如何让我的侧杆与我的内容一样高？ [英] How to make my side bar same height as my content?

问题描述

http://jsfiddle.net/g93bswco/
我在这里举一个简单的例子。

您可以查看我是否向下滚动我的内容，侧栏仅显示前100％的屏幕。我希望它延伸到与我的主要内容相同的高度。
我在这里查看了很多老问题，但我仍然没有弄清楚。如果你能在我的jsfiddle上完成，那将是非常棒的。谢谢！

  #header {margin：0;填充：10px; text-align：right;背景：blueviolet;}＃content {margin-left：190px; padding：10px;}＃sidebar {float：left;宽度：190px;身高：100％;背景：橙色; position：absolute;}＃footer {margin：0;填充：10px; text-align：center;}  

< div id = 报头 >登入< / div>< div id =content>< div id =sidebar>< Prime照片提供免费的在线照片存储，Prime会员可以在桌面，移动设备和平板电脑上保存和分享无限照片。与最多5人共享无限照片存储空间，并在Prime照片家庭保险箱中收集照片。使用Prime照片移动和网络应用程序，照片备份从未如此简单。使用iOS或Android移动应用程序自动保存您的照片，然后从手机中安全地删除它们以释放设备上的空间。从桌面计算机上传照片，并将其全部安全地存储在Prime照片网络应用中。在桌面，移动设备和平板电脑的任何地方访问您的内容。 Prime照片：Prime照片为Prime会员提供免费的在线照片存储，他们可以在桌面，移动设备和平板电脑上保存和分享无限照片。与最多5人共享无限照片存储空间，并在Prime照片家庭保险箱中收集照片。使用Prime照片移动和网络应用程序，照片备份从未如此简单。使用iOS或Android移动应用程序自动保存您的照片，然后从手机中安全地删除它们以释放设备上的空间。从桌面计算机上传照片，并将其全部安全地存储在Prime照片网络应用中。在桌面，移动设备和平板电脑的任何地方访问您的内容。 Prime照片：Prime照片为Prime会员提供免费的在线照片存储，他们可以在桌面，移动设备和平板电脑上保存和分享无限照片。与最多5人共享无限照片存储空间，并在Prime照片家庭保险箱中收集照片。使用Prime照片移动和网络应用程序，照片备份从未如此简单。使用iOS或Android移动应用程序自动保存您的照片，然后从手机中安全地删除它们以释放设备上的空间。从桌面计算机上传照片，并将其全部安全地存储在Prime照片网络应用中。在桌面，移动设备和平板电脑的任何地方访问您的内容。 Prime照片：Prime照片为Prime会员提供免费的在线照片存储，他们可以在桌面，移动设备和平板电脑上保存和分享无限照片。与最多5人共享无限照片存储空间，并在Prime照片家庭保险箱中收集照片。使用Prime照片移动和网络应用程序，照片备份从未如此简单。使用iOS或Android移动应用程序自动保存您的照片，然后从手机中安全地删除它们以释放设备上的空间。从桌面计算机上传照片，并将其全部安全地存储在Prime照片网络应用中。 < / div>< div id =footer>< / div>

显示：flex 属性和 align-items：stretch 的容器应该为您解决问题。 p>

#header {margin：0;填充：10px; text-align：right;背景：blueviolet; } #container {display：flex; align-items：stretch; } #sidebar {flex：none;宽度：190px;背景：橙色; } #content {padding：10px; } #footer {margin：0;填充：10px; text-align：center; }

< div id =header>登入< / div>< div id =container> < div id =sidebar> < / DIV> < div id =content> Lorem ipsum dolor sit amet< / div>< / div>< div id =footer>& copy;< / div>

希望这可以帮助你！

http://jsfiddle.net/g93bswco/ I make a simple example here.

You can see if I scroll down my content, the side bar would only show for first 100% screen. I want it to extend to the same height as my main content. I looked through many old questions here but I still didn't figure out. It would be great if you can do it on my jsfiddle. Thanks!

#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>

解决方案

If you have the possibility, you can restructure your HTML to wrap your content and sidebar in a container. This container, with a display: flex property and align-items: stretch should do the trick for you.

    #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">
&copy;
</div>

Hope this helps you!

这篇关于如何让我的侧杆与我的内容一样高？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！