CSS或jQuery用于此表格样式布局

这是我用来布局页面的代码。问题是，这些都是静态定义的。我想要的是这是动态的，即根据用于查看的浏览器的大小更改大小。我很确定所有div的大小都可以针对特定的页面尺寸进行固定。菜单和内容面板应该是div调整以适应。内容div将根据需要可滚动。

我能做到这一点与CSS或jQuery是必要的-或者有一个更好的方法?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        html, body  
        {
            margin: 0;
            padding: 0;
        }
        #container
        {
        }
        #toolbar
        {
            background-color: Gray;
            width: 100%;
        }
        #PageDescription
        {
            position: absolute;
            background-color: Purple;
            width: 100%;
            text-align: center;
        }
        #RestOfPage
        {
            position: absolute;    
            background-color: White;
            top: 82px;
            height: 905px;
            width: 1800px;
        }
        #Footer
        {
            position: absolute;
            top: 987px;
            left: 0;
            background-color: Yellow;
            width: 100%;
            height: 30px;
        }
        #LeftPane
        {
            position: inherit;
            width: 120px;
            background-color: Lime;
            height: 100%;
        }
        #RightPane
        {
            position: inherit;
            width: 100%;
            background-color: Silver;
            left: 120px;        
            height: 100%;
        }
    </style>
</head>
<body>
        <div id="toolbar">
            <label for="Category">Category: </label><select id="Category"></select>
        </div>
        <div id="Footer"></div>
        <div id="PageDescription">
            <h1>Page Description</h1>
        </div>
        <div id="RestOfPage">
            <div id="LeftPane">Menu</div>
            <div id="RightPane">Content Content Content</div>
        </div>
</body>
</html>

使用相对定位、浮动、清除和百分比重做模板。理想情况下，这是你的每个代码片段应该拥有的，使用借用和编辑的代码:

#LeftPane {
    position: relative;
    float: left;
    width: 13%;
    background-color: Lime;
    /* You should avoid using named colors, try 
     * #98ED00 or another hex value*/
    height: 100%;
}
#RightPane {
    position: relative;
    float: left;
    margin-left: 2%;
    width: 85%;
    background-color: Silver;
    height: 100%;
}

使用这个CSS，页面应该可以很好地重新缩放。为了将来的参考，避免使用absolute。它不灵活，很难移动，并且每个元素都会将其内容放在样式元素的上方或下方，除非明确告知不要这样做。总之，它只会在你的电脑上好看。

同样，这个解决方案可以在CSS中完全实现。不需要jQuery。

这里有一些相关的链接供你将来参考，由W3C学校提供。

CSS定位，CSS浮动，CSS框模型

你也可以使用基于百分比的宽度和高度的#RestOfPage。除了基于百分比的布局外，还可以使用min-height/max-height。

相关内容

最新更新

热门标签：