javascript - 将 div 直接放在页脚上方

Question

我目前正在制作一个应用程序。我希望时间直接位于页脚上方而不是谷歌翻译器下方。有没有办法做到这一点？我在最后附上了一张照片，以显示它现在的样子。

<!-- codes that not related-->

    <div id="demo"></div> <!-- TIME -->

<footer data-role="footer" class="ui-footer-fixed">
    <h4>Copyright 2017</h4>
</footer>

我已经按照下面的要求添加了 css。

.ui-header,
.ui-footer {
border-width: 1px 0;
border-style: solid;
position: relative;
}

.ui-header:empty,
.ui-footer:empty {
min-height: 2.6875em;
}

.ui-header .ui-title,
.ui-footer .ui-title {
font-size: 1em;
min-height: 1.1em;
text-align: center;
display: block;
margin: 0 30%;
padding: .7em 0;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
outline: 0 !important;
}

.ui-footer .ui-title {
margin: 0 1em;
}
.ui-content {
border-width: 0;
overflow: visible;
overflow-x: hidden;
padding: 1em;
}

/* Corner styling for dialogs and popups */
.ui-corner-all > .ui-header:first-child,
.ui-corner-all > .ui-content:first-child,
.ui-corner-all > .ui-footer:first-child {
-webkit-border-top-left-radius: inherit;
border-top-left-radius: inherit;
-webkit-border-top-right-radius: inherit;
border-top-right-radius: inherit;
}

.ui-corner-all > .ui-header:last-child,
.ui-corner-all > .ui-content:last-child,
.ui-corner-all > .ui-footer:last-child {
-webkit-border-bottom-left-radius: inherit;
border-bottom-left-radius: inherit;
-webkit-border-bottom-right-radius: inherit;
border-bottom-right-radius: inherit;
}

Answer 1

像下面这样的东西对你有用吗？

我不得不稍微调整一下您的 HTML 标记以显示它是如何工作的。

.ui-footer-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
}

#demo, h4 {
  margin:  0;
  padding: 5px;
}

.center {
  text-align: center;
}

<article class='center'>
  <header>
    <h1>Heading</h1>
  </header>
</article>

<article>
  <div>Main body of page</div>
</article>

<article class='center'>
  <footer data-role="footer" class="ui-footer-fixed">
    <div id="demo">
      4th December 2017 @16:40
    </div>
    <h4>Copyright 2017</h4>
  </footer>
<article>