Question

我正在尝试设计一个分为3个区域的网页： -

1）标题区域 2）左侧导航窗格 3）主要内容区域

为此，我目前正在使用以下CSS类： -

    .Content
    {
    position:absolute;
    overflow:auto;
    top:10%;
    left:20%;
    width:80%;
    height:90%;
    }

    .Header
    {
    position:absolute;
    left:0;
    top:0;
    height:10%;
    width:100%;
    background-color:Blue;
    text-align:center;
    }

    .NavPanel
    {
        position:absolute;
        top:10%;
        left:0;
        height:90%;
        width:20%;
        overflow:auto;
        background-color:Menu;
    }

body标签的高度和宽度设置为100％。

我不认为这是做我想做的事的一种非常好的方式。例如，当我减小浏览器的高度时，标题区域按比例减少，最终消失。此外，Chrome按预期呈现页面，但出于某种原因，IE8中会出现水平滚动条。

我对HTML和CSS没有很好的了解，所以我只是想知道是否有更好的方法来做到这一点。谢谢！

Answer 1

您可能需要为标题指定绝对高度，例如：

.Header 
    { 
    position:absolute; 
    left:0; 
    top:0; 
    height:100px; 
    width:100%; 
    background-color:Blue; 
    text-align:center; 
    }

您还可以在字体大小的度量中指定标题：height: 10em（1 em应该是字母“m”的宽度; 1 ex是字母“x”的高度。）< / p>

请注意，最好删除标题和内容的“position”属性。在这种情况下，定位将是相对的（默认值），使得内容显示在标题下方，而不管标题的大小。在这种情况下，请删除内容的“height”属性。

Answer 2

以下是您可以使用和扩展的基本布局：

http://jsfiddle.net/yUCdb/

Answer 3

你可以试试;

<强> HTML

<div id="container">
    <div id="header">
    </div>
    <div id="sidebar">
    </div>
    <div id="viewer"></div>
</div>

<强> CSS

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#header, #sidebar, #viewer {
    position: absolute;
}
#header{
    top: 0;
    width: 100%;
    height: 10%;
    background: yellow
}
#sidebar {
    top: 10%;
    width: 20%;
    bottom: 0;
    background-color: red;
    z-index:100;
}
#viewer {
    top: 10%;
    left: 20%;
    right: 0;
    bottom: 0;
    background-color: green;
}

Here 是一个现场演示。

使用div标签的页面布局

3 个答案: