Question

我正在尝试为我的网站创建一个带有一组4个按钮的操作栏到屏幕的底部中心。然而，我无法正确缩放按钮，因为即使改变窗口的大小，它们也需要是完美的正方形。我已经将宽度设置为百分比，但是我不能对高度做同样的事情，因为这会导致按钮不完全正方形。以下是我到目前为止的情况：

http://jsfiddle.net/38jxwf28/

#actionBar {
 position:absolute;
 width:50%;
 height:0%;
 padding-bottom:5%;
 bottom:0px;
 right:25%;
 left:50%;
 margin-left:-150px;
}

感谢您的帮助

Answer 1

如果您希望按钮始终显示在屏幕上，我建议使用固定而非绝对定位：

#actionBar {
  position: fixed;
  width: 50%;
  left: 25%;
  bottom: 5px;
}

我使用5px作为底部位置给按钮一点点＆＃34;呼吸＆＃34;室。

您的按钮会换行，因为浏览器会在不同行上的元素之间添加空格。你可以通过给他们一个＆＃34;左＆＃34;来解决这个问题。浮：

button {
  float: left;
  width: 23%;
  margin: 1%;
  height: 100%;
  color:#fff;
  border: none;
  background: #109bce;
  border-radius: 5px;
}

我添加了一种保证金风格，再次给他们喘息的空间。

使用JavaScript，我们可以动态确定按钮的宽度，然后将其用作actionBar的高度：

var b = document.getElementsByTagName('button');
var height= b[0].clientWidth;
var bar= document.getElementById('actionBar');
bar.style.height= height+'px';

这解决了方块的问题，但如果你调整窗口大小，它会搞砸。您可以通过将代码放在resize事件中来解决这个问题：

window.onresize= function() {
  var b = document.getElementsByTagName('button');
  var height= b[0].clientWidth;
  var bar= document.getElementById('actionBar');
  bar.style.height= height+'px';
}

window.onresize();

使用HTML和CSS将操作栏添加到屏幕底部

1 个答案:

Fiddle