Question

我正试图让我的侧边栏看起来像这张图片： http://s21.postimg.org/aerg28ih3/image.jpg

当页面高度太小时，它看起来像这样： https://s21.postimg.org/7ly8i7i4n/big.jpg

当它太长时，它看起来像这样： https://s21.postimg.org/qsbfldymf/small.jpg

我必须在每个页面中添加固定值，但我不想放置固定值。

body {
  background-color: #edf1f2;
  color: #777;
  font: normal 15px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  height: 100%;
  padding: 0;
  margin: 0;
}
.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  width: 1040px;
}
header {
  height: 120px;
  background: #171a21;
  background-image: url(images/header.png);
}
header h1 {
  float: left;
  margin-top: 32px;
}
header nav {
  float: right;
  padding-top: 7px;
}
header nav ul li {
  float: left;
  display: inline-block;
  margin-top: 50px;
}
header nav ul li a {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin-right: 20px
}
#side {
  float: left;
  padding: 2%;
  background: #1e262c;
  margin-bottom: -5000px;
  padding-bottom: 60.5%;
}
#side ul li {
  margin: 10px 0;
}

<header>
  <div class="wrapper">
    <h1>WEB</h1>
    <nav>
      <ul>
        <li><a href="#.html">1</a>
        </li>
        <li><a href="#.html">2</a>
        </li>
        <li><a href="#.html">3</a>
        </li>
        <li><a href="#.html">4</a>
        </li>
        <li><a href="#.html">5</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<div id="side">
  <ul>
    <li>
      <h6>Links</h6>
    </li>
    <li><a href="#">1</a>
    </li>
    <li><a href="#">2</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">5</a>
    </li>
    <li><a href="#">6</a>
    </li>
  </ul>
</div>

由于

Answer 1

您可以通过执行以下操作来使用CSS的vh和calc：

body, html {margin: 0; padding: 0;}

#header {
  height: 100px;
}
#footer {
  height: 100px;
}
#sidebar {
  height: calc(100vh - 200px); /*WINDOW HEIGHT - HEADER & FOOTER */
}

这就是“100％的窗口高度，减去页眉和页脚的200px”。然后侧边栏会调整高度以始终填充两者之间的区域。

如果有效使用，您可以执行this quick demonstration I whipped up之类的操作。请注意，无论内容量多少，侧边栏都将始终适应两者之间的匹配。

Answer 2

添加html { height: 100%; margin: 0; }并将此CSS用作侧边栏：

#side {
  box-sizing: border-box;
  float: left;
  padding: 2%;
  background: #1e262c;
  height: calc(100% - 120px);
}

它给出了整个高度减去标题的高度（120px）。

html {
  height: 100%;
  margin: 0
    }
body {
  background-color: #edf1f2;
  color: #777;
  font: normal 15px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
  height: 100%;
  padding: 0;
  margin: 0;
}
.wrapper {
  margin: 0 auto;
  padding: 0 10px;
  width: 1040px;
}
header {
  height: 120px;
  background: #171a21;
  background-image: url(images/header.png);
}
header h1 {
  float: left;
  margin-top: 32px;
}
header nav {
  float: right;
  padding-top: 7px;
}
header nav ul li {
  float: left;
  display: inline-block;
  margin-top: 50px;
}
header nav ul li a {
  color: #fff;
  text-transform: uppercase;
  font-weight: bold;
  display: block;
  margin-right: 20px
}
#side {
  box-sizing: border-box;
  float: left;
  padding: 2%;
  background: #1e262c;
  height: calc(100% - 120px);
}
#side ul li {
  margin: 10px 0;
}

<header>
  <div class="wrapper">
    <h1>WEB</h1>
    <nav>
      <ul>
        <li><a href="#.html">1</a>
        </li>
        <li><a href="#.html">2</a>
        </li>
        <li><a href="#.html">3</a>
        </li>
        <li><a href="#.html">4</a>
        </li>
        <li><a href="#.html">5</a>
        </li>
      </ul>
    </nav>
  </div>
</header>

<div id="side">
  <ul>
    <li>
      <h6>Links</h6>
    </li>
    <li><a href="#">1</a>
    </li>
    <li><a href="#">2</a>
    </li>
    <li><a href="#">3</a>
    </li>
    <li><a href="#">4</a>
    </li>
    <li><a href="#">5</a>
    </li>
    <li><a href="#">6</a>
    </li>
  </ul>
</div>

如何制作合适的侧杆高度？

2 个答案: