表格单元格侧边栏没有折叠（动画宽度）

Question

编辑：由于以下答案适用于示例，但不在我的实际网站上，因此我将网站转换为JSFiddle。我不知道他们会有什么不同，但必须有一些我忽略的东西。

https://jsfiddle.net/spikespaz/25bnqpoe/

原始

我无法设置边栏的动画关闭，因为display: table-cell没有响应宽度变化小于内容要求，即使溢出和文本换行也是如此。

jQuery＆＃39; *.toggle()正在运作，但我不喜欢它的动画方式。所以当jQuery切换它时，我尝试创建自己的类来改变侧边栏的宽度，但它实际上从来没有像普通块div那样自动折叠。

我想我必须在父级上使用display: table，在子级上使用display: table-cell（内容和侧边栏），以使侧边栏与内容的高度相同。

问题当然是宽度。我不能给它制作动画;它甚至不会在第一时间发生变化。但没有它，侧边栏就不会伸展到底部。

我不知道如何做到这一点，有什么建议吗？ （我希望尽可能避免额外的JavaScript。）

以下是您分叉的快速示例：https://jsfiddle.net/spikespaz/fr0gpmwf/

用于显示的代码段：

＆＃13;

＆＃13;

const close = $("#close");
const sidebar = $("#sidebar");

close.click(() => {
  close.toggleClass("closed");
  sidebar.toggleClass("closed");
});

＆＃13;

h3 {
  margin: 0;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(190, 190, 190);
  height: 50px;
}

#close {
  float: right;
  transition: transform 500ms;
}

#close.closed {
  transform: rotate(180deg);
}

#main {
  display: table;
  width: 90%;
  margin: 0 auto;
}

#content {
  display: table-cell;
  background: rgb(220, 220, 220);
}

#sidebar {
  display: table-cell;
  width: 100px;
  background: rgb(160, 160, 160);
  white-space: nowrap;
  overflow-x: hidden;
  transition: width 500px;
}

#sidebar.closed {
  width: 0;
}

#footer {
  display: flex;
  align-items: center;
  background: rgb(190, 190, 190);
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="header">
  <h3>This is a header!</h3>
  <button id="close">Close</button>
</div>

<div id="main">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa turpis, fermentum ac cursus sed, fringilla iaculis dui. Nam tempus dolor pellentesque placerat sodales. Praesent a tortor posuere, fringilla neque eget, aliquet nibh. Aliquam eget
      odio id nibh blandit faucibus sit amet sed mi. Nullam at lacus pulvinar dolor euismod facilisis. Curabitur cursus velit tellus, ut vestibulum lorem viverra quis. Ut ipsum lacus, laoreet molestie dolor id, efficitur cursus lorem. Aliquam sed euismod
      nulla, sit amet facilisis lectus. Quisque vel nibh consectetur, commodo orci ut, mattis lectus. Donec id dolor id metus mattis faucibus. In hac habitasse platea dictumst. Etiam scelerisque sem a nisi varius varius. Integer erat nulla, semper et
      arcu eget, laoreet ornare metus. Fusce lobortis lacinia urna a mollis. Morbi quis ipsum sed quam placerat consectetur.</p>

    <p>Sed euismod finibus ornare. Praesent aliquam nunc tincidunt enim vehicula, bibendum auctor odio dapibus. Maecenas ultrices nisi velit. Ut blandit magna quis facilisis porttitor. Curabitur hendrerit quam eget vulputate suscipit. Ut odio mauris, posuere
      quis viverra vitae, lobortis finibus erat. Maecenas dictum justo et risus pharetra, eu pharetra arcu porta. Quisque nec hendrerit sem, eu euismod lorem. Phasellus sed purus non velit ullamcorper luctus. Nulla ac sem eget quam condimentum dictum
      eu sed odio. Duis ut laoreet est, maximus porttitor mi. Vestibulum et lacus sapien. Quisque at arcu quis nisi sagittis luctus. Praesent varius rhoncus condimentum.</p>
  </div>
  <div id="sidebar">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
    </ul>
  </div>
</div>

<div id="footer">
  <h3>This is a footer!</h3>
</div>

＆＃13;

＆＃13;

＆＃13;

感谢。

Answer 1

您在父级上使用flex，您不需要使用display: table-cell。 flex子项的默认对齐方式是stretch，这将使它们具有相同的高度。

const close = $("#close");
const sidebar = $("#sidebar");

close.click(() => {
  close.toggleClass("closed");
  sidebar.toggleClass("closed");
});

h3 {
  margin: 0;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #bebebe;
  height: 50px;
}

#close {
  float: right;
  transition: transform 500ms;
}
#close.closed {
  transform: rotate(180deg);
}

#main {
  display: flex;
  margin: 0 auto;
  width: 90%;
}

#content {
  background: gainsboro;
  flex: 1 0 0;
}

#sidebar {
  width: 100px;
  background: #a0a0a0;
  white-space: nowrap;
  overflow-x: hidden;
  transition: width 1s;
}
#sidebar.closed {
  width: 0;
}

#footer {
  display: flex;
  align-items: center;
  background: #bebebe;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h3>This is a header!</h3>
  <button id="close">Close</button>
</div>

<div id="main">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa turpis, fermentum ac cursus sed, fringilla iaculis dui. Nam tempus dolor pellentesque placerat sodales. Praesent a tortor posuere, fringilla neque eget, aliquet nibh. Aliquam eget
      odio id nibh blandit faucibus sit amet sed mi. Nullam at lacus pulvinar dolor euismod facilisis. Curabitur cursus velit tellus, ut vestibulum lorem viverra quis. Ut ipsum lacus, laoreet molestie dolor id, efficitur cursus lorem. Aliquam sed euismod
      nulla, sit amet facilisis lectus. Quisque vel nibh consectetur, commodo orci ut, mattis lectus. Donec id dolor id metus mattis faucibus. In hac habitasse platea dictumst. Etiam scelerisque sem a nisi varius varius. Integer erat nulla, semper et
      arcu eget, laoreet ornare metus. Fusce lobortis lacinia urna a mollis. Morbi quis ipsum sed quam placerat consectetur.</p>

    <p>Sed euismod finibus ornare. Praesent aliquam nunc tincidunt enim vehicula, bibendum auctor odio dapibus. Maecenas ultrices nisi velit. Ut blandit magna quis facilisis porttitor. Curabitur hendrerit quam eget vulputate suscipit. Ut odio mauris, posuere
      quis viverra vitae, lobortis finibus erat. Maecenas dictum justo et risus pharetra, eu pharetra arcu porta. Quisque nec hendrerit sem, eu euismod lorem. Phasellus sed purus non velit ullamcorper luctus. Nulla ac sem eget quam condimentum dictum
      eu sed odio. Duis ut laoreet est, maximus porttitor mi. Vestibulum et lacus sapien. Quisque at arcu quis nisi sagittis luctus. Praesent varius rhoncus condimentum.</p>
  </div>
  <div id="sidebar">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
    </ul>
  </div>
</div>

<div id="footer">
  <h3>This is a footer!</h3>
</div>

Answer 2

表格单元格不会折叠小于其内容

执行ul上的关闭（具有填充，并且还需要设置动画）

＆＃13;

＆＃13;

const close = $("#close");
const sidebar = $("#sidebar ul");

close.click(() => {
  close.toggleClass("closed");
  sidebar.toggleClass("closed");
});

＆＃13;

h3 {
  margin: 0;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #bebebe;
  height: 50px;
}

#close {
  float: right;
  transition: transform 500ms;
}

#close.closed {
  transform: rotate(180deg);
}

#main {
  display: table;
  width: 90%;
  margin: 0 auto;
}

#content {
  display: table-cell;
  background: gainsboro;
}

#sidebar {
  display: table-cell;
  background: #a0a0a0;
  white-space: nowrap;
  overflow-x: hidden;
}

#sidebar ul {
  width: 100px;
  transition: width 500ms, padding 500ms;
}

#sidebar ul.closed {
  width: 0;
  padding: 0;
}

#footer {
  display: flex;
  align-items: center;
  background: #bebebe;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h3>This is a header!</h3>
  <button id="close">Close</button>
</div>

<div id="main">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa turpis, fermentum ac cursus sed, fringilla iaculis dui. Nam tempus dolor pellentesque placerat sodales. Praesent a tortor posuere, fringilla neque eget, aliquet nibh. Aliquam eget
      odio id nibh blandit faucibus sit amet sed mi. Nullam at lacus pulvinar dolor euismod facilisis. Curabitur cursus velit tellus, ut vestibulum lorem viverra quis. Ut ipsum lacus, laoreet molestie dolor id, efficitur cursus lorem. Aliquam sed euismod
      nulla, sit amet facilisis lectus. Quisque vel nibh consectetur, commodo orci ut, mattis lectus. Donec id dolor id metus mattis faucibus. In hac habitasse platea dictumst. Etiam scelerisque sem a nisi varius varius. Integer erat nulla, semper et
      arcu eget, laoreet ornare metus. Fusce lobortis lacinia urna a mollis. Morbi quis ipsum sed quam placerat consectetur.</p>

    <p>Sed euismod finibus ornare. Praesent aliquam nunc tincidunt enim vehicula, bibendum auctor odio dapibus. Maecenas ultrices nisi velit. Ut blandit magna quis facilisis porttitor. Curabitur hendrerit quam eget vulputate suscipit. Ut odio mauris, posuere
      quis viverra vitae, lobortis finibus erat. Maecenas dictum justo et risus pharetra, eu pharetra arcu porta. Quisque nec hendrerit sem, eu euismod lorem. Phasellus sed purus non velit ullamcorper luctus. Nulla ac sem eget quam condimentum dictum
      eu sed odio. Duis ut laoreet est, maximus porttitor mi. Vestibulum et lacus sapien. Quisque at arcu quis nisi sagittis luctus. Praesent varius rhoncus condimentum.</p>
  </div>
  <div id="sidebar">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
    </ul>
  </div>
</div>

<div id="footer">
  <h3>This is a footer!</h3>
</div>

＆＃13;

＆＃13;

＆＃13;

有时动画填充和宽度（或高度）会导致非平滑动画，如果是，则将填充元素包裹在ie div中，并为该元素的宽度（或高度）设置动画。< / p>

＆＃13;

＆＃13;

const close = $("#close");
const sidebar = $("#sidebar .ul-wrapper");

close.click(() => {
  close.toggleClass("closed");
  sidebar.toggleClass("closed");
});

＆＃13;

h3 {
  margin: 0;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #bebebe;
  height: 50px;
}

#close {
  float: right;
  transition: transform 500ms;
}

#close.closed {
  transform: rotate(180deg);
}

#main {
  display: table;
  width: 90%;
  margin: 0 auto;
}

#content {
  display: table-cell;
  background: gainsboro;
}

#sidebar {
  display: table-cell;
  background: #a0a0a0;
  white-space: nowrap;
  overflow-x: hidden;
}

#sidebar .ul-wrapper {
  width: 100px;
  transition: width 500ms;
}

#sidebar .ul-wrapper.closed {
  width: 0;
}

#footer {
  display: flex;
  align-items: center;
  background: #bebebe;
  height: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header">
  <h3>This is a header!</h3>
  <button id="close">Close</button>
</div>

<div id="main">
  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla massa turpis, fermentum ac cursus sed, fringilla iaculis dui. Nam tempus dolor pellentesque placerat sodales. Praesent a tortor posuere, fringilla neque eget, aliquet nibh. Aliquam eget
      odio id nibh blandit faucibus sit amet sed mi. Nullam at lacus pulvinar dolor euismod facilisis. Curabitur cursus velit tellus, ut vestibulum lorem viverra quis. Ut ipsum lacus, laoreet molestie dolor id, efficitur cursus lorem. Aliquam sed euismod
      nulla, sit amet facilisis lectus. Quisque vel nibh consectetur, commodo orci ut, mattis lectus. Donec id dolor id metus mattis faucibus. In hac habitasse platea dictumst. Etiam scelerisque sem a nisi varius varius. Integer erat nulla, semper et
      arcu eget, laoreet ornare metus. Fusce lobortis lacinia urna a mollis. Morbi quis ipsum sed quam placerat consectetur.</p>

    <p>Sed euismod finibus ornare. Praesent aliquam nunc tincidunt enim vehicula, bibendum auctor odio dapibus. Maecenas ultrices nisi velit. Ut blandit magna quis facilisis porttitor. Curabitur hendrerit quam eget vulputate suscipit. Ut odio mauris, posuere
      quis viverra vitae, lobortis finibus erat. Maecenas dictum justo et risus pharetra, eu pharetra arcu porta. Quisque nec hendrerit sem, eu euismod lorem. Phasellus sed purus non velit ullamcorper luctus. Nulla ac sem eget quam condimentum dictum
      eu sed odio. Duis ut laoreet est, maximus porttitor mi. Vestibulum et lacus sapien. Quisque at arcu quis nisi sagittis luctus. Praesent varius rhoncus condimentum.</p>
  </div>
  <div id="sidebar">
    <div class="ul-wrapper">
      <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
      <li>Item 11</li>
      <li>Item 12</li>
      </ul>
    </div>
  </div>
</div>

<div id="footer">
  <h3>This is a footer!</h3>
</div>

＆＃13;

＆＃13;

＆＃13;

根据评论更新

通常，除非使用脚本，否则无法根据内容为宽度（或高度）设置动画。

最常用的技巧是使用transform: translate，这会使菜单在内容的顶部上滑动，或设置一个足够大的max-width适应我所展示的最宽的预期宽度，更新你的小提琴。

在下面我还将sidebar上的填充更改为其子项上的边距，这将使此技巧起作用

Updated fiddle

Stack snippet

＆＃13;

＆＃13;

const sidebar_close = $("#sidebar-close");
const sidebar = $("#sidebar");

sidebar_close.click(() => {
  sidebar_close.toggleClass("closed");
  sidebar.toggleClass("closed");
});

＆＃13;

body {
  background: linear-gradient(#373737, #191919);
  color: #fff;
  font-family: Arial, sans-serif;
  margin: 0;
}

li a {
  color: #fff;
  text-decoration: none;
}

li a:hover {
  border-bottom: dotted 1px #fff;
}

#header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 200px;
}

#header-logo {
  height: 130px;
}

#header-title {
  font-size: 60px;
  margin: 0;
}

#header-desc {
  margin: 0;
}

.social-button {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: solid 2px #fff;
  color: #fff;
  border-radius: 50px;
  font-size: 28px;
  text-align: center;
  margin: 4px;
}

.social-button:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.social-button span {
  vertical-align: middle;
}

.social-button:hover {
  border-color: #b3b3b3;
  color: #b3b3b3;
}

#nav {
  overflow: hidden;
  background: #191919;
  border: solid 1px #4b4b4b;
  border-radius: 8px;
}

.nav-list {
  padding: 0;
  margin: 0;
  height: 40px;
  list-style-type: none;
}

.nav-list li {
  display: flex;
  align-items: center;
  float: left;
  padding: 0 10px;
  height: 100%;
}

.nav-list li.active {
  background: #333333;
  border-left: solid 1px #4b4b4b;
  border-right: solid 1px #4b4b4b;
}

.left {
  float: left;
}

.left li:first-child.active {
  border-left: none;
}

.right {
  float: right;
}

.right li:last-child.active {
  border-right: none;
}

#middle {
  width: 60%;
  margin: 0 auto;
}

#main {
  display: flex;
  background: #232323;
  border: solid 1px #4b4b4b;
  border-radius: 8px;
  margin: 20px 0;
}

#content {
  flex: 1 0 0;
  width: 100px;
  padding: 0 40px;
  vertical-align: top;
}

#sidebar-close {
  background: none;
  border: none;
  color: #fff;
  outline: none;
  float: right;
  font-size: 20px;
  margin-right: -40px;
  width: 40px;
  height: 40px;
  transition: transform 500ms;
}

#sidebar-close:hover {
  color: #b3b3b3;
}

#sidebar-close.closed {
  transform: rotate(180deg);
}

#sidebar {
  border-left: solid 1px #4b4b4b;
  max-width: 200px;
  white-space: nowrap;
  overflow-x: hidden;
  transition: max-width 500ms;
}

#sidebar.closed {
  max-width: 0;
}

#sidebar hr {
  margin: 0 -40px;
  border: none;
  border-bottom: solid 1px #4b4b4b;
}

.sidebar-title {
  margin-left: 40px;
}

.sidebar-list {
  list-style-type: none;
  padding: 0;
  margin: 0 40px;
}

.sidebar-list li {
  padding: 4px 0;
}

.sidebar-list li:before {
  color: #666666;
  font-family: "FontAwesome";
  content: "\f101\00a0";
}

.sidebar-list li.selected:before {
  color: #b3b3b3;
}

#footer {
  width: 100%;
  background: #191919;
  text-align: center;
  padding: 10px 0;
  bottom: 0;
  border-top: solid 1px #4b4b4b;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="middle">
  <div id="header">
    <img src="https://secure.gravatar.com/avatar/f6eb933d1270307467affe8147ce0b73?size=200" alt="EssentialMC Logo" id="header-logo">
    <div>
      <h1 id="header-title">Example Title</h1>
      <h2 id="header-desc">Only the best description here.</h2>
    </div>
    <div>
      <a href="#" class="social-button"><span class="fa fa-github-alt"></span></a>
      <a href="#" class="social-button"><span class="fa fa-twitter"></span></a>
    </div>
  </div>
  <div id="nav">
    <ul class="nav-list left">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">FAQ</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <ul class="nav-list right">
      <li><a href="#">GitHub</a></li>
      <li><a href="#">@twitter1</a></li>
      <li><a href="#">@twitter2</a></li>
    </ul>
  </div>
  <div id="main">
    <div id="content">
      <button id="sidebar-close"><span class="fa fa-angle-right"></span></button>
      <p class="indented">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium elementum velit, nec mattis ante pharetra nec. Sed id tincidunt diam. Proin fringilla interdum leo, ac pellentesque justo pellentesque id. Etiam et efficitur ante, a fermentum
        purus. Proin nec nisi tincidunt, fermentum mauris accumsan, vulputate mi. Morbi dictum blandit porttitor. Proin in orci ut arcu iaculis mattis. Nullam sollicitudin ex nisl, vitae laoreet nulla maximus tincidunt. Cras non efficitur lacus. Donec
        lorem nunc, commodo ullamcorper ipsum ac, posuere pharetra nisi. Integer vehicula tellus ultricies tincidunt cursus. Nullam vel odio eu neque pulvinar cursus.</p>
      <p>Ut nisl justo, lacinia non elementum vitae, porttitor sit amet quam. Quisque in ornare ligula. Integer molestie nunc dolor, a iaculis elit egestas in. Suspendisse rutrum auctor quam, luctus convallis neque tempor vitae. Vestibulum molestie at dui
        eu bibendum. Proin non nibh congue, bibendum magna sed, faucibus sem. Maecenas tristique lacinia lectus, a sollicitudin mauris. Vestibulum auctor, elit et feugiat molestie, metus nibh placerat lectus, quis suscipit odio leo ac arcu. Sed arcu ipsum,
        pulvinar a ligula nec, vulputate malesuada risus. Suspendisse potenti. Nulla lectus odio, auctor vitae augue sed, congue finibus ipsum.</p>
      <p>Suspendisse in mattis felis. Praesent elementum lorem nec ligula ultrices, ac dignissim nisi auctor. Curabitur tristique pellentesque lorem et consectetur. Morbi vitae purus eu nisi dictum elementum id eu enim. Integer tortor purus, vestibulum varius
        lorem at, lacinia gravida ex. Cras mattis nibh tortor, ut vulputate mi ornare vulputate. Sed congue, mauris elementum suscipit pharetra, est quam tincidunt lorem, ac suscipit mauris velit quis dui. Mauris eu ultrices dui. Donec placerat odio sed
        ligula tincidunt, et scelerisque quam sollicitudin. Duis sit amet libero posuere, imperdiet augue ut, porttitor turpis. Duis congue felis lectus, vel placerat eros tempor nec. Nam et quam at lorem porta egestas at vel libero. Duis in est eu mi
        tempus tristique. Vivamus odio nisl, rhoncus quis consectetur in, dignissim id augue.</p>
      <p>Vestibulum luctus consectetur tristique. Suspendisse viverra convallis dui, sed vestibulum arcu sollicitudin quis. Phasellus condimentum blandit enim, at sollicitudin ante. Quisque malesuada lobortis blandit. Vestibulum vehicula orci ipsum, nec
        mollis tortor malesuada a. Nunc iaculis dolor purus, ut semper ligula blandit a. Nulla in laoreet purus, eget facilisis ligula. Donec sed feugiat risus. Aliquam non mi lorem. Phasellus at nisl at tortor volutpat accumsan. In vitae enim egestas,
        pretium quam eu, facilisis ex. Pellentesque nec euismod dui, in faucibus dui. Ut bibendum varius fringilla.</p>
      <p>Quisque eget ipsum id magna pretium fringilla. Sed aliquam elementum augue, in pulvinar turpis congue eget. Donec congue fringilla mauris, quis tristique ipsum consectetur nec. Quisque vitae mollis sem. Cras ante dolor, finibus a elit ut, iaculis
        venenatis nunc. Proin dictum non urna quis ultrices. Etiam efficitur magna vehicula semper bibendum.</p>
      <p>Aliquam erat volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut elementum libero neque, et maximus purus pretium fermentum. Nam felis risus, pretium eget laoreet et, tincidunt quis nisi. Maecenas volutpat aliquam ex, eu varius
        nunc eleifend vitae. Mauris id augue arcu. Sed vulputate laoreet tortor sit amet laoreet. Ut ac faucibus lorem, ac sodales sem. Suspendisse eget neque ac mi venenatis placerat fermentum quis nibh.</p>
      <p>Ut lorem magna, euismod eu ullamcorper in, ultricies a orci. Morbi eu metus eu diam tempor sollicitudin. Aliquam venenatis, felis at luctus molestie, massa justo volutpat nunc, id interdum libero ipsum id justo. Nullam lobortis sapien et gravida
        pharetra. Curabitur a laoreet massa, et venenatis erat. Nullam pellentesque convallis quam, et vehicula erat ullamcorper quis. Pellentesque viverra fermentum ante, nec faucibus eros auctor eu.</p>
      <p>Fusce aliquet malesuada maximus. Vivamus et tortor orci. Sed dignissim ullamcorper sodales. Mauris aliquam placerat justo, eget placerat est elementum et. Duis elit mauris, ullamcorper eget sem sed, faucibus finibus enim. Nunc vitae massa accumsan,
        egestas felis ac, gravida nisl. Nam quis pretium dui. Nam et lectus ut est placerat blandit.</p>
      <p>Nullam rhoncus lacinia eros in dignissim. Cras consequat eu elit eget blandit. Proin sodales pharetra elementum. Mauris ut tellus at turpis aliquet consequat. Aliquam interdum velit sed commodo facilisis. Proin volutpat faucibus dui dignissim vehicula.
        Praesent lacus risus, tincidunt id facilisis a, consectetur vel leo. In justo sapien, mattis at ultricies eget, congue scelerisque arcu. Curabitur feugiat dui odio, ac blandit sapien rhoncus a. Cras suscipit dolor turpis, ut tincidunt eros ullamcorper
        in.</p>
      <p>Morbi hendrerit id massa quis porta. Quisque convallis tortor a nibh blandit, a tristique tortor efficitur. Mauris a nunc elit. Sed ultrices turpis quis sem venenatis semper. Sed pulvinar viverra augue, nec elementum mauris posuere eu. Phasellus
        a dignissim dui. Fusce id rhoncus justo. In mi est, maximus nec nisi ac, mollis commodo eros. Cras quis leo commodo, interdum erat quis, iaculis orci. Morbi molestie cursus felis, non scelerisque nulla congue sed. Aenean vitae quam luctus, molestie
        nulla sit amet, lobortis mi. In hac habitasse platea dictumst. Cras luctus hendrerit sem, id sagittis ante pharetra eu. Etiam ac imperdiet sapien, sit amet rutrum urna. Quisque ante enim, ullamcorper tristique auctor ac, elementum eleifend enim.
        Vivamus at ex imperdiet, pellentesque magna feugiat, finibus sapien.</p>
      <p>Quisque lacus neque, gravida ut consequat in, condimentum quis lectus. Pellentesque sem est, aliquet eget eleifend malesuada, faucibus ac nunc. Morbi scelerisque pulvinar tortor, ut sollicitudin magna. Ut mi odio, tempus a sodales sit amet, aliquam
        in nunc. Praesent lobortis quam quis augue cursus, eget accumsan leo condimentum. Morbi gravida fringilla hendrerit. Duis vitae quam eleifend, pulvinar ipsum id, ultrices est. Sed turpis dui, laoreet in eleifend vel, pulvinar eu dolor. Quisque
        lacinia varius arcu vel imperdiet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      <p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque finibus mi at vehicula vehicula. Fusce quis orci enim. Cras massa tortor, auctor sit amet augue vitae, fermentum ornare tellus. Ut id volutpat dui. Etiam
        euismod eros dapibus purus consectetur venenatis. Proin ac condimentum tellus. Curabitur molestie posuere libero, a egestas sapien porttitor sed.</p>
      <p>Sed efficitur, est eu rhoncus molestie, arcu dui suscipit turpis, eget placerat mi augue eget augue. Praesent mollis rutrum placerat. Phasellus at tellus aliquam, consequat orci eu, congue turpis. Aliquam pretium lobortis eros id vestibulum. Cras
        et efficitur mi. Aenean varius maximus cursus. Proin laoreet rutrum dictum. Etiam eu cursus ante. Ut vel mi enim. Nam blandit pellentesque lectus in efficitur. Praesent viverra ex a mi vulputate, dapibus tincidunt mauris pellentesque. Sed consectetur
        facilisis luctus. Suspendisse vel quam nisi.</p>
      <p>Morbi malesuada nisl eu augue ornare vulputate. Donec nunc felis, blandit a purus eu, fringilla pellentesque mi. Morbi venenatis, metus et convallis pretium, nunc magna porttitor purus, ut posuere dolor mi vitae diam. Proin volutpat viverra libero.
        Suspendisse dapibus, nisl nec ultrices accumsan, magna felis efficitur ante, ut convallis urna justo vitae lectus. Suspendisse cursus malesuada lorem vitae dictum. Sed a bibendum metus. Aliquam sagittis tempor nisl sollicitudin rhoncus. Duis congue,
        lectus id tempor elementum, arcu dolor porta purus, ut blandit neque felis et libero. Fusce imperdiet dui leo, ac ornare felis lobortis id. Integer condimentum, ligula vitae semper aliquet, felis est porta metus, in interdum odio lacus mattis
        purus. Vestibulum pretium libero ultrices, luctus massa vitae, aliquet diam. Donec accumsan sem turpis, nec vehicula arcu rhoncus et. Curabitur felis urna, porta ac lobortis quis, consectetur sit amet velit. Nullam sit amet magna et enim pellentesque
        interdum.</p>
      <p>Mauris mattis scelerisque sem, quis lobortis ipsum fermentum ut. Phasellus fringilla eros sit amet erat dictum commodo. Phasellus tristique mauris vitae diam aliquet dictum. Sed varius imperdiet mi, vel porta massa faucibus ut. Donec a nisl id nunc
        aliquam tristique in at dui. Proin varius suscipit eros, et aliquam augue faucibus ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec augue nulla. Integer finibus consequat mi. Maecenas posuere tellus vel augue hendrerit
        lobortis. Vestibulum eros ante, mattis et porta eu, pharetra et sapien. Vestibulum quis odio eleifend, tincidunt nisi vitae, convallis tortor.</p>
      <p>Aliquam vel placerat enim. Donec rutrum, lacus a congue consequat, erat sem tristique nibh, sit amet pretium urna risus id quam. Donec porttitor metus a porta placerat. In eget neque odio. Maecenas sed fermentum ante, quis maximus ligula. Pellentesque
        elit quam, pellentesque a viverra ac, ultrices eu metus. Sed eu congue velit, convallis venenatis felis.</p>
      <p>Donec varius mauris porta fermentum pharetra. Ut accumsan vehicula lorem, a ultricies nisi egestas at. Ut cursus volutpat diam ac tempus. Morbi iaculis nisl vel justo aliquam, et pulvinar felis sagittis. Duis imperdiet egestas pulvinar. Curabitur
        euismod arcu id sapien faucibus lobortis. Proin ullamcorper interdum enim, sed placerat eros molestie sit amet. Integer hendrerit placerat consequat. Morbi varius odio at lorem ultricies condimentum. Sed gravida diam arcu.</p>
      <p>Morbi pharetra lectus vel nisi bibendum maximus. Praesent tincidunt interdum magna, imperdiet sodales nisi condimentum vitae. Suspendisse vel lectus in mauris imperdiet fringilla vel at purus. Vestibulum rhoncus lacus justo, eu volutpat sem feugiat
        quis. Ut iaculis, arcu vel faucibus ultricies, quam nisl porta turpis, vitae vehicula sapien orci euismod sem. Suspendisse consequat dapibus consectetur. Maecenas tristique purus at nunc ultrices, a sodales ex feugiat.</p>
      <p>Praesent et lacus egestas, consequat arcu viverra, scelerisque lorem. Nam sit amet augue tortor. Suspendisse quis odio sed tortor dictum scelerisque vel et justo. Nunc vitae ultrices erat, non congue felis. Nam nec consequat ipsum. Nam ullamcorper
        nunc at leo pellentesque finibus. Praesent congue odio arcu, at semper leo commodo quis. Vivamus eros felis, malesuada et egestas nec, volutpat eu ligula. Vestibulum sit amet felis et libero vestibulum sagittis. Maecenas tempor dapibus dui eu
        malesuada. Integer sit amet libero nec turpis laoreet consectetur. Nam id lectus fermentum, egestas dui in, accumsan ex. Donec dapibus lobortis ex, ac egestas nulla vestibulum at. Fusce tempor diam quis lacus facilisis pharetra. Vivamus sem arcu,
        consequat ut mi ac, eleifend semper augue. Quisque nec pretium justo, eget rhoncus metus.</p>
      <p>Mauris pellentesque justo at enim vestibulum tempor. Aenean tempus eros ut nisi feugiat, vel laoreet orci elementum. Ut tincidunt sapien quis enim scelerisque fringilla. Integer pretium lorem vitae aliquet facilisis. Duis non pellentesque tortor,
        ut congue tortor. Morbi at sagittis ipsum, vel elementum quam. Vivamus pretium velit sed ante tincidunt ultrices.</p>
    </div>
    <div id="sidebar">
      <h3 class="sidebar-title">Project</h3>
      <ul class="sidebar-list">
        <li class="selected"><a href="#">Overview</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Downloads</a></li>
        <li><a href="#">External</a></li>
        <li><a href="#">Source</a></li>
      </ul>
      <hr>
      <h3 class="sidebar-title">Projects</h3>
      <ul class="sidebar-list">
        <li><a href="#">Project 1</a></li>
        <li><a href="#">Project 2</a></li>
        <li><a href="#">Project 3</a></li>
        <li><a href="#">Project 4</a></li>
      </ul>
      <hr>
      <h3 class="sidebar-title">Unofficial</h3>
      <ul class="sidebar-list">
        <li><a href="#">Project 5</a></li>
        <li><a href="#">Project 6</a></li>
        <li><a href="#">Project 7</a></li>
        <li><a href="#">Project 8</a></li>
        <li><a href="#">Project 9</a></li>
        <li><a href="#">Project 10</a></li>
        <li><a href="#">Project 11</a></li>
      </ul>
    </div>
  </div>
</div>
<div id="footer">
  <p>Copyright &copy; 2017, spikespaz. All rights reserved unless otherwise stated.</p>
</div>

＆＃13;

＆＃13;

＆＃13;