Question

我正在尝试使用CSS和javascript提供菜单。我想在屏幕的右下方放一张桌子，让它展开。目前，该表总是向下扩展或尝试将自身塞入包含该表的页脚元素中。你怎么强迫桌子扩大？溢出样式似乎没有提供所需的功能。

谢谢！

Answer 1

在CSS中试试这个。

table.bottomRight {
  position:absolute;
  bottom:0px;
  right:0px;
}

Answer 2

你的意思是这样吗？

table {
  position: absolute;
  bottom: 0px;
  left: 50%;
  margin-left: -250px;
  width: 500px;
}

table th {
  background-color: #eee;
  border-bottom: 1px #ccc solid;
  height: 25px;
  line-height: 25px;
}

table th, table td {
  padding: 10px;
}

table tbody {
  display: none;
}

用于演示目的的javascript：

$('#test-button').bind('click', function() {
  var tableBody = $('table tbody');
  tableBody.toggle();
});

示例：http://jsfiddle.net/8SvCm/

Answer 3

感谢所有反馈。我找到的解决方案记录在这里：

http://www.bennadel.com/blog/1740-Building-A-Fixed-Position-Bottom-Menu-Bar-ala-FaceBook-.htm

它使用jQuery以及嵌套div和CSS的组合来实现菜单。很酷！

在屏幕右下方放置一个表格

3 个答案: