不同设备底部的按钮组

Question

我正在为移动设备做设计，我必须考虑不同的设备。我在页面底部放置了一个按钮组。这意味着按钮出现在滚动条的末尾。但是，当页面因为设备太大而太小时，按钮会出现在页面中间。然后是白色space。我尝试使用以下规则：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;
}

有人可以帮助我吗？真的非常感谢，我给最佳答案打个star。

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>

不同设备底部的按钮组

Button-groups at the bottom in differents devices

html

css

mobile

device

button