Question

我目前在刀片文件中有这个代码，它非常接近我需要的东西。但是，我无法让侧边栏元素一直保持颜色，就像在列中一样。

*已编辑，html已在早期版本中删除

<style>

    ul.products li {
        width: 200px;
        display: inline-block;
        vertical-align: top;
    }

    body{
        background: white;
    }

    #wrapper { overflow:auto; }

    #content {
        float: right; width: 80%;
        margin:5px 0 5px 0;
    }

    #sidebar {
        float: left;
        width: 20%;
        background: #F9F8F2 repeat-y;
    }

</style>

<body>
<div id="wrapper">

    <div id="sidebar">
        <ul>
            <li>Sidebar stuff.</li>
            <li>Sidebar stuff.</li>
            <li>Sidebar stuff.</li>
        </ul>
    </div>

    <div id="content">
        <ul class="products">
            <li>
                <a href="#">
                    <img src="logo.png">
                    <h4>text</h4>
                    <p>$20.00</p>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="logo.png">
                    <h4>text</h4>
                    <p>$25.00</p>
                </a>
            </li>
        </ul>
    </div>
</div>
</body>

Answer 1

试试这个

#sidebar {
    float: left;
    width: 20%;
    background-color: #F9F8F2;
}

“background”在一个声明中设置不同的背景属性。通常，如果您错过了房产或打错字，它将无法正确显示。您可以在此处查看文档：

http://www.w3schools.com/cssref/css3_pr_background.asp

Answer 2

我无法让侧边栏元素一直保持颜色，就像在列中一样。

1。 Flexbox解决方案（推荐）：

＆＃13;

html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  background: white;
}
#wrapper {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-flow: column wrap;
  justify-content: flex-start;
}
#sidebar {
  /* float: left; */
  flex: 1;
  width: 20%;
  background: #F9F8F2;
}
ul li {
  /*width: 200px;*/
  display: inline-block;
  vertical-align: top;
}
ul {
  padding: 5px;
}

＆＃13;

<div id="wrapper">
  <div id="sidebar">
    <ul>
      <li>Sidebar stuff.</li>
      <li>Sidebar stuff.</li>
      <li>Sidebar stuff.</li>
    </ul>
  </div>
</div>

＆＃13;

2。不改变#sidebar位置属性解决方案：

＆＃13;

html,
body {
  background: white;
  height: 100%;
}
#wrapper {
  overflow: auto;
  height: 100%;
}
#sidebar {
  float: left;
  width: 20%;
  background: #F9F8F2 repeat-y;
  height: 100%;
}

＆＃13;

<div id="wrapper">
  <div id="sidebar">
    <ul class="products">
      <li>Sidebar stuff.</li>
      <li>Sidebar stuff.</li>
      <li>Sidebar stuff.</li>
    </ul>
  </div>
</div>

＆＃13;

3。使用absolute position #sidebar解决方案：

＆＃13;

body {
  background: white;
}
#wrapper {
  overflow: auto;
}
#sidebar {
  /* float: left; */
  position: absolute;
  top: 0;
  bottom: 0;
  width: 20%;
  background: #F9F8F2;
}
ul li {
  /* width: 200px;*/
  display: inline-block;
  vertical-align: top;
}
ul {
  padding: 5px;
}

＆＃13;

<div id="wrapper">
  <div id="sidebar">
    <ul>
      <li>Sidebar stuff.</li>
      <li>Sidebar stuff.</li>
      <li>Sidebar stuff.</li>
    </ul>
  </div>
</div>

＆＃13;

Answer 3

将display: flex添加到#wrapper：

http://codepen.io/anon/pen/vgLWQL

容器/页面的高度在这里可以是动态的，它可以调整到两个元素中有更多内容，但两者都具有相同的高度。

此外：

我将min-height: 100vh;添加到#wrapper，使其至少与窗口一样高。

侧边栏，颜色向下，html，css

3 个答案: