代码之家 › 专栏 › 技术社区 › cyberpirate92

带有可扩展页眉和页脚和滚动体的FlexBox

flexbox css html

cyberpirate92 · 技术社区 · 6 年前

我正在尝试创建一个全高div( .wrapper )其中包含页眉、正文和页脚,根据内容,页眉/页脚应展开/收缩,如果溢出,正文应滚动,

或者换句话说

我不想容器div滚动,只有身体应该滚动溢出。

.wrapper {
  position: absolute;
  top: 0;
  width: 50%;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  box-shadow: 0 0 10px 1px #7f7f7f;
}

.wrapper .blade-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #7f7f7f;
  border-bottom: none;
  align-self: strech;
}

.wrapper .blade-container .blade-header {
  display: flex;
  background-color: black;
  color: white;
  justify-content: space-between;
  padding: 5px;
}

.wrapper .blade-container .blade-header .header-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: "Segoe UI", "Segoe UI Light", "Segoe WP Light", "Segoe WP", Tahoma, Arial, sans-serif;
}

.wrapper .blade-container .blade-header .header-title .header-title-wrapper {
  width: 100%;
  color: inherit;
}

.wrapper .blade-container .blade-header .header-actions {
  display: flex;
}

.wrapper .blade-container .blade-header .header-actions .action-button {
  display: flex;
  height: 30px;
  width: 30px;
  background-color: transparent;
  justify-content: center;
  align-items: center;
  transition: background-color 0.4s ease-out;
  cursor: pointer;
}

.wrapper .blade-container .blade-header .header-actions .action-button:hover {
  background: rgba(230, 230, 230, 0.3);
}

.wrapper .blade-container .blade-header .header-actions .danger:hover {
  background-color: #aa0000 !important;
}

.wrapper .blade-container .blade-body {
  display: flex;
  padding: 5px;
  height: 100%;
  background-color: white;
}

.wrapper .blade-container .blade-body .blade-body-wrapper {
  width: 100%;
  height: 100%;
  background-color: inherit;
  overflow-y: auto;
}

.wrapper .blade-container .blade-footer {
  display: flex;
  align-self: stretch;
  color: white;
}

.wrapper .blade-container .blade-footer .blade-footer-wrapper {
  padding: 3px;
  width: 100%;
  height: 100%;
  background-color: #323232;
}

<div class="wrapper">
  <div class="blade-container">
    <div class="blade-header">
      <div class="header-title">
        <div class="header-title-wrapper">
          Lorem Ipsum
        </div>
      </div>
      <div class="header-actions">
        <span class="action-button">
          <b>&#x0229f;</b>
        </span>
        <span class="action-button" (click)="onMaximize()">
          <b>&#x0229E;</b>
        </span>
        <span class="action-button danger" id="ngxBladeCloseBtn">
          <b>&times;</b>
        </span>
      </div>
    </div>
    <div class="blade-body">
      <div class="blade-body-wrapper">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
        'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
        infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

        <h3> Where does it come from? </h3>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
          up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
          Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
          a line in section 1.10.32.</p>

        <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
          versions from the 1914 translation by H. Rackham.
        </p>

        <h3> Where can I get some? </h3>
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem
          Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It
          uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.</p>
      </div>
    </div>
    <div class="blade-footer">
      <div class="blade-footer-wrapper">
        <h3> Footer </h3>
        "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
        blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
        and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
        pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
      </div>
    </div>
  </div>
</div>

现在我也得到了一个包装的滚动条,我怎么能避免呢?

我试着设置 overflow-y: hidden 对于 .包装 ,但它只是隐藏了页脚。

我很抱歉冗长的代码,它是一个角度组件,它使用 ng-content ,因此在header、body和footer中添加了所有包装类。

Codepen

2 回复 | 直到 6 年前

G-Cyrillus 6 年前

如果你愿意 .blade-body 滚动,然后删除 height: 100%; 使用 flex:1; + overflow:scroll;

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 0 10px 1px #7f7f7f;
}
.wrapper .blade-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #7f7f7f;
  border-bottom: none;
  align-self: strech;
}
.wrapper .blade-container .blade-header {
  display: flex;
  background-color: black;
  color: white;
  justify-content: space-between;
  padding: 5px;
}
.wrapper .blade-container .blade-header .header-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: "Segoe UI", "Segoe UI Light", "Segoe WP Light", "Segoe WP",
    Tahoma, Arial, sans-serif;
}
.wrapper .blade-container .blade-header .header-title .header-title-wrapper {
  width: 100%;
  color: inherit;
}
.wrapper .blade-container .blade-header .header-actions {
  display: flex;
}
.wrapper .blade-container .blade-header .header-actions .action-button {
  display: flex;
  height: 30px;
  width: 30px;
  background-color: transparent;
  justify-content: center;
  align-items: center;
  transition: background-color 0.4s ease-out;
  cursor: pointer;
}
.wrapper .blade-container .blade-header .header-actions .action-button:hover {
  background: rgba(230, 230, 230, 0.3);
}
.wrapper .blade-container .blade-header .header-actions .danger:hover {
  background-color: #aa0000 !important;
}
.wrapper .blade-container .blade-body {
  display: flex;
  padding: 5px;
  flex: 1;
  overflow: auto;
  background-color: white;
  border: solid red;
}
.wrapper .blade-container .blade-body .blade-body-wrapper {
  width: 100%;
  height: 100%;
  background-color: inherit;
  overflow-y: auto;
}
.wrapper .blade-container .blade-footer {
  display: flex;
  align-self: stretch;
  color: white;
}
.wrapper .blade-container .blade-footer .blade-footer-wrapper {
  padding: 3px;
  width: 100%;
  height: 100%;
  background-color: #323232;
}

<div class="wrapper">
  <div class="blade-container">
    <div class="blade-header">
      <div class="header-title">
        <div class="header-title-wrapper">
          Lorem Ipsum
        </div>
      </div>
      <div class="header-actions">
        <span class="action-button">
          <b>&#x0229f;</b>
        </span>
        <span class="action-button" (click)="onMaximize()">
          <b>&#x0229E;</b>
        </span>
        <span class="action-button danger" id="ngxBladeCloseBtn">
          <b>&times;</b>
        </span>
      </div>
    </div>
    <div class="blade-body">
      <div class="blade-body-wrapper">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
        'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
        infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

        <h3> Where does it come from? </h3>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
          up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
          Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
          a line in section 1.10.32.</p>

        <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
          versions from the 1914 translation by H. Rackham.
        </p>

        <h3> Where can I get some? </h3>
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem
          Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It
          uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.</p>
      </div>
    </div>
    <div class="blade-footer">
      <div class="blade-footer-wrapper">
        <h3> Footer </h3>
        "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
        blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
        and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
        pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
      </div>
    </div>
  </div>
</div>

另外,设置一些 min-height ,因此在较小的屏幕上仍然可以看到内容

.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 0 10px 1px #7f7f7f;
}
.wrapper .blade-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #7f7f7f;
  border-bottom: none;
  align-self: strech;
}
.wrapper .blade-container .blade-header {
  display: flex;
  background-color: black;
  color: white;
  justify-content: space-between;
  padding: 5px;
}
.wrapper .blade-container .blade-header .header-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: "Segoe UI", "Segoe UI Light", "Segoe WP Light", "Segoe WP",
    Tahoma, Arial, sans-serif;
}
.wrapper .blade-container .blade-header .header-title .header-title-wrapper {
  width: 100%;
  color: inherit;
}
.wrapper .blade-container .blade-header .header-actions {
  display: flex;
}
.wrapper .blade-container .blade-header .header-actions .action-button {
  display: flex;
  height: 30px;
  width: 30px;
  background-color: transparent;
  justify-content: center;
  align-items: center;
  transition: background-color 0.4s ease-out;
  cursor: pointer;
}
.wrapper .blade-container .blade-header .header-actions .action-button:hover {
  background: rgba(230, 230, 230, 0.3);
}
.wrapper .blade-container .blade-header .header-actions .danger:hover {
  background-color: #aa0000 !important;
}
.wrapper .blade-container .blade-body {
  display: flex;
  padding: 5px;
  flex: 1;
  overflow: auto;
  min-height:50vh;
  background-color: white;
  border: solid red;
}
.wrapper .blade-container .blade-body .blade-body-wrapper {
  width: 100%;
  height: 100%;
  background-color: inherit;
  overflow-y: auto;
}
.wrapper .blade-container .blade-footer {
  display: flex;
  align-self: stretch;
  color: white;
}
.wrapper .blade-container .blade-footer .blade-footer-wrapper {
  padding: 3px;
  width: 100%;
  height: 100%;
  background-color: #323232;
}

<div class=“wrapper”>
<div class=“blade container”>
<div class=“blade header”>
<div class=“header title”>
<div class=“header title wrapper”>
乱数假文
</分区>
</分区>
<div class=“header actions”>
<span class=“action button”>
<b>&x0229f;<b>
</跨度>
跨度类=“动作按钮”(点击)=“OnMax最大化())& Gt;
<b>&x0229e;</b>
</跨度>
<span class=“action button danger”id=“ngxBladeCloseBtn”>
<b>&次;<b>
</跨度>
</分区>
</分区>
<div class=“blade body”>
<div class=“blade body wrapper”>
<p>Lorem Ipsum只是印刷和排版行业的虚拟文本自15世纪以来,Lorem Ipsum一直是业界标准的虚拟文本,当时一个不知名的印刷商拿了一个铅字厨房,拼凑起来做一本铅字样本书。
它不仅存活了五个世纪,而且跨越了电子排版,基本保持不变。它在20世纪60年代随着含有Lorem Ipsum段落的Letraset表单的发布而流行,最近
桌面发布软件,如Aldus PageMaker,包括Lorem IPSUM版本。</p>

我们为什么要用它?这是一个长期存在的事实,读者会分散注意力的一个页面的可读内容时,看其布局。使用lorem ipsum的意义在于,它或多或少具有字母的正态分布,而不是使用
“这里的内容,这里的内容”,使它看起来像可读的英语。许多桌面发布包和网页编辑器现在使用Lorem Ipsum作为默认的模型文本,搜索“Lorem Ipsum”将发现仍在
婴儿期。多年来,各种版本不断演变,有时是偶然的,有时是故意的(注入幽默之类的)。

<h3>它来自哪里?<h3>
<p>与流行的观点相反,Lorem Ipsum并不是简单的随机文本它起源于公元前45年的古典拉丁文学,使它超过2000年。弗吉尼亚州汉普顿悉尼学院的拉丁语教授理查德麦克林托克
在一篇洛伦·伊普苏姆的文章中,通过引用古典文学中较为晦涩的拉丁语单词consectetur,我们发现了这个毋庸置疑的来源Lorem ipsum来自“De Finibus”第1.10.32节和第1.10.33节
西塞罗的《善与恶的极端》,写于公元前45年这本书是一本关于伦理学的论文,在文艺复兴时期非常流行。Lorem ipsum的第一行“Lorem ipsum dolor sit amet…”来自
第1.10.32节中的一行。</P>

<p>自1500年代以来使用的Lorem ipsum标准块复制如下,供感兴趣的人使用。西塞罗的“De Finibus Bonorum et Malorum”第1.10.32节和第1.10.33节也以原版形式复制,并附有英文
1914年由H.Rackham翻译的版本。
<p>

<h3>在哪里可以买到?<h3>
<p>有许多不同的版本,但大多数都受到了某种形式的改变,通过注入幽默,或随机的文字,看起来甚至不太可信。如果你要用一段知识
伊普桑,你需要确保没有任何尴尬隐藏在文本中间。互联网上的所有lorem ipsum生成器都倾向于在必要时重复预定义的块,这使得它成为互联网上第一个真正的生成器。它
使用一本超过200个拉丁单词的字典,结合一些典型的句子结构,生成看起来合理的Lorem Ipsum因此,所产生的知识总是没有重复,注入幽默,或没有特征。
文字等</p>
</分区>
</分区>
<div class=“blade footer”>
<div class=“blade footer wrapper”>
<h3>页脚<h3>
“另一方面,我们义愤填膺地谴责那些被当下的欢乐魅力所迷惑和挫败的人,他们被欲望所蒙蔽,以致于他们无法预见必然会发生的痛苦和麻烦;他们是平等的。
责怪是那些因意志薄弱而失职的人,这和从劳苦和痛苦中退缩是一样的。这些案例非常简单,易于区分。在一个自由的时间里,当我们的选择权不受限制的时候
当没有什么能阻止我们去做我们最喜欢的事情时,每一种快乐都会受到欢迎,每一种痛苦都会被避免。但在某些情况下,由于责任或商业义务的要求,经常会发生
快乐必须被拒绝,烦恼必须被接受。因此,在这些问题上,智者总是坚持这一选择原则:他拒绝享乐以获得其他更大的享乐,或者忍受痛苦以避免更大的痛苦。”
</分区>
</分区>
</分区>
</分区>

Temani Afif 6 年前

这样地:

远离的 bottom:0

.wrapper {
  position: absolute;
  top: 0;
  width: 50%;
  right: 0;
  overflow-y: auto;
  box-shadow: 0 0 10px 1px #7f7f7f;
}
.wrapper .blade-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #7f7f7f;
  border-bottom: none;
  align-self: strech;
}
.wrapper .blade-container .blade-header {
  display: flex;
  background-color: black;
  color: white;
  justify-content: space-between;
  padding: 5px;
}
.wrapper .blade-container .blade-header .header-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: "Segoe UI", "Segoe UI Light", "Segoe WP Light", "Segoe WP", Tahoma, Arial, sans-serif;
}
.wrapper .blade-container .blade-header .header-title .header-title-wrapper {
  width: 100%;
  color: inherit;
}
.wrapper .blade-container .blade-header .header-actions {
  display: flex;
}
.wrapper .blade-container .blade-header .header-actions .action-button {
  display: flex;
  height: 30px;
  width: 30px;
  background-color: transparent;
  justify-content: center;
  align-items: center;
  transition: background-color 0.4s ease-out;
  cursor: pointer;
}
.wrapper .blade-container .blade-header .header-actions .action-button:hover {
  background: rgba(230, 230, 230, 0.3);
}
.wrapper .blade-container .blade-header .header-actions .danger:hover {
  background-color: #aa0000 !important;
}
.wrapper .blade-container .blade-body {
  display: flex;
  padding: 5px;
  height: 100%;
  background-color: white;
}
.wrapper .blade-container .blade-body .blade-body-wrapper {
  width: 100%;
  height: 100%;
  background-color: inherit;
  overflow-y: auto;
}
.wrapper .blade-container .blade-footer {
  display: flex;
  align-self: stretch;
  color: white;
}
.wrapper .blade-container .blade-footer .blade-footer-wrapper {
  padding: 3px;
  width: 100%;
  height: 100%;
  background-color: #323232;
}

<div class="wrapper">
  <div class="blade-container">
    <div class="blade-header">
      <div class="header-title">
        <div class="header-title-wrapper">
          Lorem Ipsum
        </div>
      </div>
      <div class="header-actions">
        <span class="action-button">
          <b>&#x0229f;</b>
        </span>
        <span class="action-button" (click)="onMaximize()">
          <b>&#x0229E;</b>
        </span>
        <span class="action-button danger" id="ngxBladeCloseBtn">
          <b>&times;</b>
        </span>
      </div>
    </div>
    <div class="blade-body">
      <div class="blade-body-wrapper">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
          desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

        Why do we use it? It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using
        'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their
        infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

        <h3> Where does it come from? </h3>
        <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked
          up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
          Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from
          a line in section 1.10.32.</p>

        <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English
          versions from the 1914 translation by H. Rackham.
        </p>

        <h3> Where can I get some? </h3>
        <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem
          Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It
          uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic
          words etc.</p>
      </div>
    </div>
    <div class="blade-footer">
      <div class="blade-footer-wrapper">
        <h3> Footer </h3>
        "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal
        blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled
        and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that
        pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains."
      </div>
    </div>
  </div>
</div>