Question

不是另一个CSS滚动问题。是的，但请相信我，我对所有常见情况都很满意，但这让我感到疯狂。如果你看http://mailwarriors.co.uk/vocab/csstest.htm，你会看到一个带有典型固定高度页眉和页脚的简单布局，其余部分分成一些百分比大小的区域。在左边，有一个固定宽度的div包含两个另外的div，每个高度为50％，称为Panel1和Panel2。如果您的浏览器窗口太小而无法显示其所有内容，则Panel 1和Panel2将获得垂直滚动条。但这就是事情。您将看到滚动条适用于整个面板，包括每个顶部的小固定高度“标题”和“工具栏”div，而所需的是仅在每个的实际“内容”div上获取滚动条面板。如果只有一个面板，我就知道该怎么做了。但是如图所示其中两个，我只是没有看到它。任何人都可以建议吗？这是基本页面的HTML / CSS：

<!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 </title>
    <style media="screen" type="text/css">

html{overflow:hidden}
#header{position:absolute;top:0;right:0;bottom:84px;left:0;height:82px;padding:2px}
#menuctr{position:absolute;top:84px;bottom:16px;left:0;width:200px;border:solid 1px #000}
#panel1{height:50%;left:0;width:200px;overflow:auto}
#panel2{height:50%;left:0;width:200px;overflow:auto}

#main{position:absolute;top:84px;right:0;bottom:16px;left:204px;border:solid 1px #000}
#mainWrapper{position:absolute;top:84px;right:0px;bottom:16px;left:204px}
#mainTop{position:absolute;top:0;right:0;left:0;height:70%;}
#mainTopLeft{position:absolute;top:0;right:0;left:0;width:50%;height:100%}
#mainTopRight{position:absolute;right:0;top:0;width:50%;height:100%}
#mainTopRightTop{position:absolute;top:0;right:0;left:0;height:70%}
#mainTopRightBottom{position:absolute;bottom:0;left:0;right:0;height:30%}
#mainImage{position:absolute;top:0;right:0;bottom:0px;left:0;border:solid 1px #000}
#mainBottom{position:absolute;bottom:0;left:0;height:30%;width:100%;overflow:auto}
#mainSubImage{position:absolute;top:0px;right:0px;bottom:0;left:0;border:solid 1px #000}
#mainInformation{position:absolute;top:0px;right:0;bottom:0;left:0px;border:solid 1px #000; }

#footer{position:absolute;right:0;bottom:0;left:0;height:12px;padding:2px}

.caption{top:0;right:0;left:0;height:14px;border-bottom:solid 1px #000;font-weight:bold;padding:2px 1px 0 1px}
.toolbar{top:17px;right:0;left:0;height:16px;border-bottom:solid 1px #000;padding:2px}

     </style>
</head>
<body>
    <div id="header">
        This is the title area
    </div>
    <div id="menuctr">
        <div id="panel1">
            <div class="caption">
                Panel 1 title
            </div>
            <div class="toolbar">
                [panel 1 toolbar]
            </div>
            <div>
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
            </div>
        </div>
        <div id="panel2">
            <div class="caption">
                Panel 2 caption
            </div>
            <div class="toolbar">
                [panel 2 toolbar]
            </div>
            <div >
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
            </div>
        </div>
    </div>
    <div id="footer">
        This is the footer
    </div>
    <div id="mainWrapper">
        <div id="mainTop">
            <div id="mainTopLeft">
                <div id="mainImage">
                    <div class="caption">
                        this is another caption
                    </div>
                    <div class="toolbar">
                        this is another toolbar
                    </div>
                </div>
            </div>
            <div id="mainTopRight">
                <div id="mainTopRightTop">
                    <div id="mainSubImage">
                        <div class="caption">
                            Yet another caption
                        </div>
                        <div class="toolbar">
                            Yet another toolbar
                        </div>
                    </div>
                </div>
                <div id="mainTopRightBottom">
                    <div id="mainInformation">
                        <div class="caption">
                            A caption again
                        </div>
                        <div class="toolbar">
                            A toolbar again
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="mainBottom">
            Some other stuff
        </div>
    </div>
</body>
</html>

提前感谢任何潜在客户。

彼得。

Answer 1

我会在CSS中更改此内容

#panel1{height:50%;left:0;width:200px;overflow:hidden}
#panel1{height:50%;left:0;width:200px;overflow:hidden}

并添加此

.inner {left:0;width:100%;overflow:auto; position:absolute;bottom:0;top:40px;}

然后将“inner”类添加到内容div

<div id="panel1">
            <div class="caption">
                Panel 1 title
            </div>
            <div class="toolbar">
                [panel 1 toolbar]
            </div>
            <div class="inner">
                panel 1 content<br />
                .....

只检查Opera，以便安全检查其他浏览器

Answer 2

您需要将面板设置为非滚动，并且只滚动内容。像这样：

<!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 </title>
    <style media="screen" type="text/css">

html{overflow:hidden}
#header{position:absolute;top:0;right:0;bottom:84px;left:0;height:82px;padding:2px}
#menuctr{position:absolute;top:84px;bottom:16px;left:0;width:200px;border:solid 1px #000}
#panel1{height:50%;left:0;width:200px;overflow:hidden; position: relative;}
#panel2{height:50%;left:0;width:200px;overflow:hidden; position: relative;}
#panel1 .content, #panel2 .content { position: absolute; left: 0; top: 38px; bottom: 0; width: 100%; overflow: auto; }

#main{position:absolute;top:84px;right:0;bottom:16px;left:204px;border:solid 1px #000}
#mainWrapper{position:absolute;top:84px;right:0px;bottom:16px;left:204px}
#mainTop{position:absolute;top:0;right:0;left:0;height:70%;}
#mainTopLeft{position:absolute;top:0;right:0;left:0;width:50%;height:100%}
#mainTopRight{position:absolute;right:0;top:0;width:50%;height:100%}
#mainTopRightTop{position:absolute;top:0;right:0;left:0;height:70%}
#mainTopRightBottom{position:absolute;bottom:0;left:0;right:0;height:30%}
#mainImage{position:absolute;top:0;right:0;bottom:0px;left:0;border:solid 1px #000}
#mainBottom{position:absolute;bottom:0;left:0;height:30%;width:100%;overflow:auto}
#mainSubImage{position:absolute;top:0px;right:0px;bottom:0;left:0;border:solid 1px #000}
#mainInformation{position:absolute;top:0px;right:0;bottom:0;left:0px;border:solid 1px #000; }

#footer{position:absolute;right:0;bottom:0;left:0;height:12px;padding:2px}

.caption{top:0;right:0;left:0;height:14px;border-bottom:solid 1px #000;font-weight:bold;padding:2px 1px 0 1px}
.toolbar{top:17px;right:0;left:0;height:16px;border-bottom:solid 1px #000;padding:2px}

     </style>
</head>
<body>
    <div id="header">
        This is the title area
    </div>
    <div id="menuctr">
        <div id="panel1">
            <div class="caption">
                Panel 1 title
            </div>
            <div class="toolbar">
                [panel 1 toolbar]
            </div>
            <div class="content">
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
                panel 1 content<br />
            </div>
        </div>
        <div id="panel2">
            <div class="caption">
                Panel 2 caption
            </div>
            <div class="toolbar">
                [panel 2 toolbar]
            </div>
            <div class="content">
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
                panel 2 content<br />
            </div>
        </div>
    </div>
    <div id="footer">
        This is the footer
    </div>
    <div id="mainWrapper">
        <div id="mainTop">
            <div id="mainTopLeft">
                <div id="mainImage">
                    <div class="caption">
                        this is another caption
                    </div>
                    <div class="toolbar">
                        this is another toolbar
                    </div>
                </div>
            </div>
            <div id="mainTopRight">
                <div id="mainTopRightTop">
                    <div id="mainSubImage">
                        <div class="caption">
                            Yet another caption
                        </div>
                        <div class="toolbar">
                            Yet another toolbar
                        </div>
                    </div>
                </div>
                <div id="mainTopRightBottom">
                    <div id="mainInformation">
                        <div class="caption">
                            A caption again
                        </div>
                        <div class="toolbar">
                            A toolbar again
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="mainBottom">
            Some other stuff
        </div>
    </div>
</body>
</html>

Test case here

CSS滚动挑战案例

2 个答案: