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％的像素，然后我可以将它与身体的高度进行比较，并确定哪个更大。

有什么想法吗？

由于

约翰

Answer 1

使用margin: 0 auto

杀死你的左右列，给你的主div一个宽度，然后使用自动左右边距将该div居中。例如：

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

Answer 2

为什么要创建空元素来构建页面？如何将body背景设置为您需要的颜色，并且：

#center_div {width: /* whatever */;
             margin: 0 auto; /* to center in the viewport */
             overflow: auto; /* or visible */
}

您可以不使用overflow属性，只需使用min-width代替width（我不记得这是如何跨浏览器兼容）来定义'正常' '宽度，以这种方式，内容将强制div更大，以显示内容。

Answer 3

如果左边和右边的div没有任何内容，则不需要将它们作为单独的div：将其格式应用于容器div，并使用margin: 0 auto将内容div居中。显然，您需要为容器div指定一个指定的宽度和一个非透明的背景。然后你可以让浏览器根据需要调整窗口的大小 - 你不需要重新发明那个部分的轮子。

CSS：

#container {background-color:gray;}
#content {background-color:white;width:80%;margin:0 auto;}

HTML：

...
<body>
<div id="container">
<div id="content">
...your content here...
</div>
</div>
</body>
...

（如果您的页面没有容器div，则可以将背景颜色应用于body元素，并保存更多代码。）

css列缩小100％像素值

3 个答案: