整个高度的 CSS 侧边栏

Question

我在使用高度标签时遇到了问题。

我想制作一个背景延伸到页面底部的侧边栏。

我已将高度设置为 100%，但这并不像我想象的那样有效。

这是我的侧边栏代码。

#side{
    box-sizing:border-box;
    width:20%;
    float:left;
    background-color: white;
    list-style: none;
    color: #fff; 
    text-align: left;
    height: 100%;
}

Answer 1

基本上，您需要使侧边栏绝对定位，在相对包装标签内，类似于正文。然后在将要显示在它旁边的元素上使用与侧边栏相同宽度的填充。

举个例子:

header {
  background: red
}
section {
  background: yellow
}
.wrapper {
  position: relative;
  margin: 0 auto;
  width: 900px;
}
aside {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
  border: solid green 2px;
}
article {
  padding-left: 240px;
  border: solid orange 2px;
}
footer {
  background: grey;
}

<header>
  <h1>header</h1>
</header>
<section>
  <div class="wrapper">
    <aside>sidebar</aside>
    <article>
      <h1>A Clone of My Own</h1> 
      <p>OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can. I love this planet! I've got wealth, fame, and access to the depths of sleaze that those things bring. Bender, I didn't know you liked cooking. That's so
        cute. If rubbin' frozen dirt in your crotch is wrong, hey I don't wanna be right. And from now on you're all named Bender Jr. And why did 'I' have to take a cab?</p>
      <h2>The Sting</h2> 
      <p>Guards! Bring me the forms I need to fill out to have her taken away! Too much work. Let's burn it and say we dumped it in the sewer. You're going to do his laundry? Yep, I remember. They came in last at the Olympics, then retired to promote alcoholic
        beverages! I feel like I was mauled by Jesus. Who are you, my warranty?!</p>
      <ul>
        <li>File not found.</li>
        <li>Whoa a real live robot; or is that some kind of cheesy New Year's costume?</li>
        <li>Are you crazy? I can't swallow that.</li>
      </ul>
      <h3>Lethal Inspection</h3> 
      <p>As an interesting side note, as a head without a body, I envy the dead. Oh sure! Blame the wizards! Take me to your leader! Kif might! What kind of a father would I be if I said no?</p>
      <h4>Anthology of Interest II</h4> 
      <p>I had more, but you go ahead. But, like most politicians, he promised more than he could deliver. Noooooo! Have you ever tried just turning off the TV, sitting down with your children, and hitting them? Why would a robot need to drink? THE BIG BRAIN
        AM WINNING AGAIN! I AM THE GREETEST! NOW I AM LEAVING EARTH, FOR NO RAISEN!</p>
      <ol>
        <li>You can see how I lived before I met you.</li>
        <li>This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel. That makes me feel angry!</li>
        <li>Oh sure! Blame the wizards!</li>
        <li>OK, this has gotta stop. I'm going to remind Fry of his humanity the way only a woman can.</li>
        <li>Belligerent and numerous.</li>
      </ol>
      <h5>War Is the H-Word</h5> 
      <p>I had more, but you go ahead. You can see how I lived before I met you. I saw you with those two "ladies of the evening" at Elzars. Explain that. Five hours? Aw, man! Couldn't you just get me the death penalty? In your time, yes, but nowadays shut
        up! Besides, these are adult stemcells, harvested from perfectly healthy adults whom I killed for their stemcells. And I'm his friend Jesus.</p>
    </article>
  </div>
</section>
<footer>Footer</footer>