0

我有一个页面，分为 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% 以像素为单位的方法，然后我可以将其与身体的高度进行比较并决定哪个更大。

有任何想法吗？

谢谢

约翰

4

3 回答 3

3

利用margin: 0 auto

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

#mainDiv {
  width: 80%;
  margin: 0 auto;
}
于 2009-11-16T16:13:36.200 回答
3

Why are you creating empty elements to frame the page? How about setting the body background to the colour you require and:

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

You could leave off the overflow property, and simply use min-width in place of width (I can't remember how cross-browser compatible this is) to define the 'normal' width, in such a way that the content will force the div to be larger as required to display the content.

于 2009-11-16T16:16:28.237 回答
0

If the left and right divs don't have any contents, then there's no need for them to be separate divs: apply their formatting to your container div instead, and center your contents div using margin: 0 auto. Obviously, you'll need to give the container div a specified width, and a non-transparent background. Then you can let the browser take care of resizing the window as needed - there's no need for you to reinvent the wheel for that part.

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>
...

(If your page doesn't have a container div, then you can apply the background color to the body element instead, and save even more code.)

于 2009-11-16T16:15:53.293 回答