0

有什么方法可以让红色区域填充可视区域的其余部分，但不像现在那样延伸到页脚中？我还需要 infoContent 部分是可滚动的。标题部分的高度是可变的。

我发现了一堆几年前的答案，说要使用 JavaScript，但是有没有可以在现代浏览器中使用的技术来避免这种情况？

HTML：

<div id="page">
<aside id="infoBar">
        <header>Variable Sized Header</header>
        <div id="infoContent">
            <div>First Content Item</div>
            <div>Second Content Item</div>
            <div>Third Content Item</div>
        </div>
    </aside>
    <footer id="footer">Footer</footer>
</div>

CSS：

#footer { position:fixed; bottom: 0; height: 50px; background-color: rgba(0, 0, 255, 0.5); width: 100%;}

#infoBar { position: fixed; right:0; top: 0; bottom: 50px; padding: 5px; border: 1px solid black; width: 200px; }
#infoBar > header { height: 50px; }

#infoContent { height: 100%; background-color: red; overflow-y: auto; }
#infoContent > div { margin: 5px; height: 50px; background-color: yellow; }

这是一个可以玩的小提琴：http: //jsfiddle.net/gWmtD/

4

2 回答 2

2

首先想到的是使用表格：http: //jsfiddle.net/gWmtD/9/

我使用内联 CSS 是因为我更容易使用它来制作原型，并且您可以轻松地看到我所做的更改。

<div id="page">
    <aside id="infoBar" style="overflow-y: auto;">
        <table style="height:100%; width:100%;">
            <tr>
                <td>
                    <header>
                        Variable Sized Header
                    </header>
                </td>
            </tr>
            <tr>
                <td style="height:100%; width:100%;">
                    <div id="infoContent">
                        <div>First Content Item</div>
                        <div>Second Content Item</div>
                        <div>Third Content Item</div>
                    </div>
                </td>
            </tr>
        </table>
    </aside>
    <footer id="footer">Footer</footer>
</div>



编辑：要在 FireFox 中向下滚动页面时启用旁边的滚动条，请添加以下属性：

overflow-y: auto;

这将使 y 滚动条仅在需要时出现。这在 Chrome 中默认发生，可以通过设置在 Chrome 中关闭：

overflow-y: none;
于 2013-01-18T23:25:29.463 回答
-1

快速谷歌搜索显示滚动条的溢出方法：http: //www.w3schools.com/cssref/pr_pos_overflow.asp

作为开始，您应该查看其他问题的 css 包装类。

于 2013-01-18T23:27:05.860 回答