Question

我正在努力根据我们的奇怪要求找到一种编码网站的方法。该网站应该在从IE6到Opera的所有浏览器中正确显示。

该网站分为三个部分。它包含一个顶部的标题，左侧的导航和屏幕的其余部分应填充内容部分。以下图片可以帮助您更好地理解我的描述。

layout of the website http://www.4freeimagehost.com/uploads/820aee2ded8b.png

以下是踢球者：三个部分中的每一部分都应单独滚动，不应出现浏览器滚动条。页面应该显示为类似于使用框架。当然，在足够大的屏幕上，不应出现滚动条。

使用哪种方式显示网站并不重要，虽然框架不是一个选项，但div更适合。有两个条件：

网站应始终填满整个浏览器屏幕。标题和内容部分应该到达页面的右边框，导航以及底部的内容。
网站缩小后 - 无论是由于调整浏览器窗口大小还是由于分辨率较小 - 应该会显示每个部分的滚动条，但整个页面都没有“浏览器滚动条” 。标题应始终保持高度，导航始终保持宽度。

你知道如何实现这一切吗？

此致哈德

编辑1：哦，我忘记了：该网站应该可以在1024x768中查看。编辑2：另一件事：标题有一个固定的高度和导航固定的宽度。导航的高度以及内容的高度和宽度应该填满整个屏幕。

Answer 1

<强>更新：

我找到了这篇文章

http://www.alistapart.com/articles/conflictingabsolutepositions/

只有CSS＆amp; HTML我认为你正在寻找的东西！

最终演示：http://jsbin.com/icemo3/24

在回答您的上一条评论时，我已经制定出这个需要一点jquery（javascript）的解决方案，请参阅演示并使用演示代码！

$(window).load(function() {
getWindowProportion()
});

$(window).resize(function() {
getWindowProportion()
});

function getWindowProportion() {
 $('#wrapper').attr('style', 'width:' + $(window).width() + 'px');
    $('#header').attr('style', 'height:200px;width:' + $(window).width() + 'px');
    $('#navigation').attr('style', 'height:' + ($(window).height() - 200) + 'px;top:200px;width:300px');
    $('#content').attr('style', 'width:' + ($(window).width() - 300) + 'px;top:200px;height:' + ($(window).height() - 200) + 'px;left:' + ($('#navigation').width()) + 'px');
};

CSS DEMO 2：http://jsbin.com/icemo3/2

CSS DEMO 3：http://jsbin.com/icemo3/3

* { margin:0; padding:0 }
html, body { margin:0; padding:0;  position:relative; overflow:auto; width:100%;  height:100%; }
#content { float:left; width:  80%; background: cyan; height:80%;  top:20%; left:20% }
#navigation { float:left; width:  20%; background: green; height:80%;  top:20% }
#header {  width:  100%; background: red; height:20%; }
.scrollme { margin:0; padding:0; overflow: auto;  position:absolute; }
p { margin:10px }

<div id="header" class="scrollme"><p>some text here</p></div>
<div id="navigation" class="scrollme"><p>some text here</p></div>
<div id="content" class="scrollme"><p>some text here</p></div>

注意：

tested on: IE6+ Chrome Firefox Opera

每个部分都有自己的滚动条！

每个部分都有100％的宽度和高度！

没有浏览器窗口滚动条显示！

每个部分始终保持其比例

处理所有屏幕分辨率

Answer 2

好问题。对于这个，你必须找到x和y的浏览器屏幕分辨率大小（可能使用javascript）。使用此大小，在div部分中指定宽度和高度。

在div中，你可以这样使用

<div id="nameID" style="position: relative; overflow-y: auto; overflow-x: auto;"></div>

试试这个方法。我认为你可以得到正确的解决方案。

Answer 3

所以，我现在找到了一种方法，可以在没有标题的情况下完成这项工作。

导航部分使用以下CSS：

float: left;
height: 100%
overflow: auto;
width:185px;

内容部分使用此：

height: 400px;
overflow: auto;

以及

html, body{
    height: 100%
}

唯一的问题是当我插入标题时，网站会一直延伸到浏览器窗口之外。这是由于height: 100%的使用。你知道如何让页面仍然适合浏览器界面吗？

编辑1：以下JavaScript可以解决这个问题，至少在Firefox中是这样的：

window.onresize = resize;

function resize(){
    heightWithoutHeader = (window.innerHeight - 85) + "px"; 
    document.getElementById("content").style.height = heightWithoutHeader;
    document.getElementById("navigation").style.height = heightWithoutHeader;
}

但也许有更优雅的CSS解决方案......

Answer 4

框架仍然存在是有原因的。有时间和地点。这可能是它。

但无论如何，这是用CSS代替帧的方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
        <title>Not Frames</title>
        <style type="text/css" media="screen">
            .fake-content {
                margin: 20px;
                background-color: #000;
                height: 1500px;
                width: 1500px;
            }

            /* Get rid of the original scrollbars */
            html, body
            {
                margin: 0;
                padding: 0;

                width: 100%;
                height: 100%;

                overflow: hidden;
            }

            /* The frames */
            .frame
            {
                position: absolute;
                overflow: scroll;
            }

            /* The sections */
            #header
            {
                top: 0;
                height: 250px;
                width: 100%;

                background-color: #F00;
            }

            #sidebar
            {
                top: 250px;
                bottom: 0;
                left: 0;
                width: 250px;

                background-color: #0F0;
            }

            #content
            {
                top: 250px;
                bottom: 0;
                left: 250px;
                right: 0;

                background-color: #00F;
            }
        </style>
    </head>
    <body>
        <div id="header" class="frame">
            <div class="fake-content">Content</div>
        </div>
        <div id="sidebar" class="frame">
            <div class="fake-content">Content</div>
        </div>
        <div id="content" class="frame">
            <div class="fake-content">Content</div>
        </div>
    </body>
</html>

用CSS实现奇怪的要求（一种模拟框架）

4 个答案: