css 列缩小 100% 像素值

Question

我有一个页面分为 3 个 div，左中右。我不想在左侧和右侧显示任何内容，它们只是将页面框起来。

    #leftDiv
{
    background-color: Gray;
    width: 10%;
    left: 0px;
    top: 0px;
    position: absolute;
    height: 100%;
}

#rightDiv
{
    background-color: Gray;
    height: 100%;
    width: 10%;
    left: 90%;
    top: 0px;
    position: absolute;
    clear:both;
}

中间的 div 有一个表格，允许用户选择要查看的行数。如果他们选择了一个很大的值，那么表格的主体就会超出左右 div 的底部。

为了更正这个问题，我将以下代码放入

if ($("#leftDiv").length == 1) {
                $("#leftDiv").height($("body").height() + "px");
            }
            if ($("#rightDiv").length == 1) {
                $("#rightDiv").height($("body").height() + "px"); ;
            }

在用户选择一个较大的值后选择一个小于页面大小的值之前，此方法工作正常。 然后左右 div 设置为小于 100%。 我需要的是找出 100% 以像素为单位的方法，然后我可以将其与 body 的高度进行比较并决定哪个更大。

有什么想法吗？

谢谢

约翰

Answer 1

使用margin: 0 auto

取消左右两列，给主 div 一个宽度，然后使用自动左右边距使该 div 居中。例如:

#mainDiv {
  width: 80%;
  margin: 0 auto;
}