Question

我正在为移动设备做设计，我不得不考虑不同的设备。我在页面底部放了一个按钮组。这意味着底部出现在滚动条的最后。但是，当页面因为设备很大而太小时，页面出现在页面中间。之后，就有了白色空间。我尝试使用此规则：How to put the footer at the bottom of the visible page?但按钮始终显示在屏幕底部。我需要在使用滚动条后看到底部。

HTML

<div id="botoneraInternet" class="btn-group btn-group-justified" role="group" aria-label="...">
    <div class="btn-group btn-group-lg" role="group">
        <button type="button" class="btn btn-default" id="botonHardware" disabled="" style="background-color: rgb(48, 144, 184);">
            <span><img class="icons" src="imagenes/llave.png"></span> Hardware
        </button>
    </div>

    <div class="btn-group btn-group-lg" role="group">
        <button type="button" class="btn btn-default" id="botonClose" style="background-color: rgb(223, 228, 229);">
            <span><img class="icons" src="imagenes/valija.png"></span> Cerrar WO
        </button>
    </div>
</div>

CSS

.btn-group {
  position: relative;
  vertical-align: middle;
}
.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

有人可以帮帮我吗？非常感谢，我将给明星最好的答案。

Answer 1

尝试这个....你提供的代码没有，所以我即兴创作了一下。但请告诉我这是否是你需要的。

http://codepen.io/carinlynchin/pen/WvbLXE

CSS：

body{
    height:900px;
    position:relative;
}

.btn-group {
    position: absolute;
    width:100%;
    bottom:0
}

.btn-group div {
    display:inline;
}

HTML：

<div id="botoneraInternet" class="btn-group btn-group-justified" role="group" aria-label="...">
    <div role="group">
        <button type="button" class="btn btn-default" id="botonHardware" disabled="" style="background-color: rgb(48, 144, 184);">
            <span><img class="icons" src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg"></span> Hardware
        </button>
    </div>

    <div role="group">
        <button type="button" class="btn btn-default" id="botonClose" style="background-color: rgb(223, 228, 229);">
            <span><img class="icons" src="https://pbs.twimg.com/profile_images/3540744128/7dd80644ae052f1b04180c41bbc674ab.png"></span> Cerrar WO
        </button>
    </div>
</div>

不同设备底部的按钮组

1 个答案: