1

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>
Weiheng Li
  • 57
  • 6
  • 1
    `#sidebar { top: 0; bottom: 0; }` and remove `height: 100%`. Floating elements that have `position: absolute;` makes no sense, btw. – connexo Jan 02 '18 at 18:41
  • then the header would be hidden? and when I scroll up the sidebar still not long enough. – Weiheng Li Jan 02 '18 at 18:42
  • Then that is because the referred parent element for your absolut positioning has no height. – connexo Jan 02 '18 at 18:43
  • I don't know which questions you've looked at but this is the first google result: https://stackoverflow.com/questions/2997767/how-do-i-keep-two-divs-that-are-side-by-side-the-same-height – Nelson Yeung Jan 02 '18 at 18:46
  • 1
    https://jsfiddle.net/g93bswco/1/ – connexo Jan 02 '18 at 18:47

3 Answers3

1

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>
Zoe
  • 27,060
  • 21
  • 118
  • 148
chriskirknielsen
  • 2,839
  • 2
  • 14
  • 24
1

I don't know if this is allowed but I added a new parent div for the sidebar and content. Then it was easy setting the rest up since the parent will take the height of the child ( the content), then the sidebar height, will be the same height as the content because the sidebar is defined as height:100% (100% of its parent height).

Here is the code and the 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>
Ivan86
  • 5,695
  • 2
  • 14
  • 30
1

I recommend using Flexbox, which was introduced with CSS3. It allows you to position elements next to each other and control their alignment. There is a useful summary at css-tricks.com: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

To prepare your markup for flexbox, I added a wrapping main element around your sidebar which will receive the flexbox styles, removed the margin of your #content and the floats you used to position the two divs next to each other. Finally, I added display: flex and align-items: stretch to the wrapper. This makes the CSS smaller and easier to follow.

#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>
Christian Danscheid
  • 32
  • 2
  • 5