Question

我正在制作一款应用。但是，我的页脚直接位于按钮下方。我希望我的页脚位于应用程序的底部。我将附上一个链接，看看它现在的样子。

<body>
    <div data-role="page" id="mainpage">
        <div data-role="header" class="header" data-position="fixed">
            <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
            <h1><b>Converter App</b></h1>
        </div>

        <div class="app">
            <a href="converter.html" class="ui-btn">Converter</a>
        </div>


        <footer data-role="footer">
            <h4>Copyright 2017</h4>
        </footer>
    </div>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script type="text/javascript" src="scripts/index.js"></script>
</body>

我已根据要求添加了以下CSS。

.ui-header-fixed,
.ui-footer-fixed {
    left: 0;
    right: 0;
    width: 100%;
    position: fixed;
    z-index: 1000;
}

https://imgur.com/a/ECjxq

Answer 1

添加css类或ID

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
}

在html中

<div id="footer">
    <h4>Copyright 2017</h4>
</div>

明确将页脚容器固定在页面底部

https://jsfiddle.net/5qj7eggm/

Answer 2

您想要的是首先指定应用容器的最小高度，例如body, #main-page { min-height: 100vh; }

然后将页脚粘在底部

＆＃13;

body, #mainpage {
  min-height: 100vh;
  position: relative;
}

.ui-header-fixed,
.ui-footer-fixed {
  left: 0;
  right: 0;
  width: 100%;
  position: fixed;
  z-index: 1000;
}

.ui-footer-fixed {
  bottom: 0;
}

＆＃13;

<div data-role="page" id="mainpage">
  <div data-role="header" class="header" data-position="fixed">
    <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
    <h1><b>Converter App</b></h1>
  </div>

  <div class="app">
    <a href="converter.html" class="ui-btn">Converter</a>
  </div>


  <footer data-role="footer" class="ui-footer-fixed">
    <h4>Copyright 2017</h4>
  </footer>
</div>

＆＃13;

您可能还需要稍微修改html结构，以使页脚始终可见。

Answer 3

使用

footer {
    position: fixed;
    left: 0;
    bottom: 0;
}

你需要添加

#mainpage{
height:100vh;}

.ui-header-fixed,
.ui-footer-fixed {
left: 0;
right: 0;
width: 100%;
position: fixed;
z-index: 1000;
}
footer {
    position: fixed;
    left: 0;
    bottom: 0;
}
#mainpage{
height:100vh;}

<div data-role="page" id="mainpage">
        <div data-role="header" class="header" data-position="fixed">
            <a href="index.html" class="ui-btn ui-icon-home ui-btn-icon-left">Home</a>
            <h1><b>Converter App</b></h1>
        </div>

        <div class="app">
            <a href="converter.html" class="ui-btn">Converter</a>
        </div>


        <footer data-role="footer">
            <h4>Copyright 2017</h4>
        </footer>
    </div>



    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="scripts/platformOverrides.js"></script>
    <script type="text/javascript" src="scripts/index.js"></script>

将页脚放在底部

3 个答案: