Html 如何将子div配置为仅在父div百分比设置需要时显示滚动条_Html_Css

Html 如何将子div配置为仅在父div百分比设置需要时显示滚动条

html css

Html 如何将子div配置为仅在父div百分比设置需要时显示滚动条,html,css,Html,Css,我正在处理一个相当标准的页面（或者我认为是这样）。我想做的是允许页面的宽度由标记和我在css中定义的顶级.page样式决定。我的网站有一个左导航窗格，它总是有一定的宽度。“内容”区域随页面延伸，应根据用户屏幕的剩余空间确定我想显示滚动条上的内容，不“保持和平”与我的浮动区宽度。例如，我最近遇到了一系列需要显示滚动条的子元素，以防止页面延伸到永恒下面是不需要滚动条时的简单图像：下面是当我的子内容比页面宽时的情况：我想做的是在红色部分显示滚动条，当它们达到允许的空间时（包括边距和填充）。

我正在处理一个相当标准的页面（或者我认为是这样）。我想做的是允许页面的宽度由

标记和我在css中定义的顶级

.page

样式决定。我的网站有一个左导航窗格，它总是有一定的宽度。“内容”区域随页面延伸，应根据用户屏幕的剩余空间确定

我想显示滚动条上的内容，不“保持和平”与我的浮动区宽度。例如，我最近遇到了一系列需要显示滚动条的子元素，以防止页面延伸到永恒

下面是不需要滚动条时的简单图像：

下面是当我的子内容比页面宽时的情况：

我想做的是在红色部分显示滚动条，当它们达到允许的空间时（包括边距和填充）。我希望所有的东西都能很好地填充在蓝色部分上，这样黄色和白色部分就不会重叠

我附上了我用来组成这个显示的html，因为我想不出更好的方法来描述我的方法：

<html>
<head>
    <style type="text/css">
        body
        {
            background-color: gray;             
        }

        .page /* page is always centered on screen */
        {
            background-color: white;
            width: 90%; 
            margin-left: auto;
            margin-right: auto;
            padding: 10px;
        }

        .nav-pane /* navigation pane is always 100px */
        {
            width: 100px;
            height: 100%;
            background-color: green;
        }

        .nav-pane > div
        {
            width: 100px;
        }

        .content-pane /* content pane should size with page */
        {
            background-color: yellow;
            margin: 10px;         
        }

        .content-pane > div /* !!! SHOULD NOT STRETCH !!! */
        {
            position: relative;
            overflow: auto;
            background-color: blue;
            padding: 10px;
            margin: 10px;
            color: white;
        }

        .content-pane > div > *
        {
            clear: both;
        }

        .content /* content div holds tables, images, paragraphs, etc.. */
        {
            background-color: red;
            float: left;
            margin-bottom: 20px;
        }

        #small /* one is small */
        {
            width: 200px;
        }

        #big /* one is BIG! */
        {
            width: 4000px;
        }
    </style>
</head>
<body>
    <div class="page">
        <table width="100%" style="border: solid black">
            <tr>
                <td class="nav-pane">
                    <div>
                        I am the nav-pane
                    </div>
                </td>
                <td class="content-pane">
                    <div>
                        I am the content pane

                        <h2>I am a heading</h2>
                        <div class="content">
                            <div id="small">Scrollbar not needed</div>
                        </div>

                        <h2>I too am a heading</h2>
                        <div class="content">
                            <div id="big">I require a scroll bar to keep this page pretty... :(</div>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>


身体
{
背景颜色：灰色；
}
.page/*页面始终在屏幕上居中*/
{
背景色：白色；
宽度：90%；
左边距：自动；
右边距：自动；
填充：10px；
}
.nav窗格/*导航窗格始终为100px*/
{
宽度：100px；
身高：100%；
背景颜色：绿色；
}
.导航窗格>分区
{
宽度：100px；
}
.content pane/*内容窗格的大小应与页面大小一致*/
{
背景颜色：黄色；
利润率：10px；
}
.content窗格>div/*！！！不要拉伸*/
{
位置：相对位置；
溢出：自动；
背景颜色：蓝色；
填充：10px；
利润率：10px；
颜色：白色；
}
.内容窗格>div>*
{
明确：两者皆有；
}
.content/*content div保存表格、图像、段落等*/
{
背景色：红色；
浮动：左；
边缘底部：20px；
}
#小的一个是小的*/
{
宽度：200px；
}
#大/*一个是大的*/
{
宽度：4000px；
}
我是导航窗格
我是内容窗格
我是一个标题
不需要滚动条
我也是一个标题
我需要一个滚动条来保持这个页面漂亮…：(

不使用javascript，我想做的事情可能实现吗

预先感谢任何洞察力…

< P> >添加到您的<代码>表>代码> Audio>代码>表布局：固定样式应该达到我认为您所需要的。将内联（如您已经做的）或作为CSS的一部分添加（我将考虑更好的方式）。< /P>

说明：您的问题在于

div

位于

表格中，默认情况下，表格单元格会展开以适应其内容。使用表格布局属性设置表格，使其保持固定大小，可防止表格增大大小。当然，滚动条它的es实际上会出现在表上，而不是div上，我看不到图像，只有alt文本。你搞定了！谢谢Scott！：）