0

我正在尝试设计一个分为 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 方面没有丰富的知识，所以我只是想知道是否有更好的方法来做到这一点。谢谢！

4

5 回答 5

1

您可以尝试min-height在标题上设置 a 并使用媒体查询。

例如，您可以设置min-height: 2em;和使用如下媒体查询：

@media (max-height: 20em) { /* the min-height for the header = 10% of the max-height used here */
    .content, .navPanel {
        top: 2em; bottom: 0;
    }
}

演示

但是，媒体查询在 IE 8 或更早版本中不起作用。

于 2012-09-10T07:32:15.917 回答
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”的高度）。

请注意，删除标题和内容的“位置”属性可能会更好。在这种情况下，定位将是相对的（默认），使内容出现在标题下方，而不管标题的大小。在这种情况下，请删除内容的“高度”属性。

于 2012-09-10T07:19:40.233 回答
0

你可以试试；

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;
}

这是一个现场演示。

于 2012-09-10T11:38:53.593 回答
0

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

http://jsfiddle.net/yUCdb/

于 2012-09-10T11:30:54.097 回答
0

嗨，我认为您正在寻找像这样的页面布局复制并将此代码粘贴到任何记事本中并检查出来。

<html>
<head>
    <style type="text/css">


        .Container
        {
        background-color:yellow;
        height:100%;
        weight:100%;
        }

        .inner
        {
        float:left;
        top:10%;
        height:90%;
        width:100%
        }

        .Content
        {
        float:left;
        top:10%;
        left:20%;
        width:80%;
        height:100%;
        background-color:skyblue;
        }

        .Header
        {
        float:left;
        height:10%;
        width:100%;
        background-color:Blue;
        text-align:center;
        }

        .NavPanel
        {
            float:left;
            top:10%;
            height:100%;
            width:20%;
            background-color:Menu;
        }
    </style>
</head>
<body>
    <div class="Container">
        <div class="Header"></div>
            <div class="inner">
                <div class="NavPanel"></div>
                <div class="Content"></div>
            </div>
        </div>
    </div>
</body>
</html>
于 2012-09-10T07:37:04.200 回答