Javascript 如何将3个div显示为"；子标题“&引用；子页脚“&引用；“子内容”；_Javascript_Css_Footer_Html

Javascript 如何将3个div显示为"；子标题“&引用；子页脚“&引用；“子内容”；

javascript css html

Javascript 如何将3个div显示为"；子标题“&引用；子页脚“&引用；“子内容”；,javascript,css,footer,html,Javascript,Css,Footer,Html,我需要在我的站点内创建一个子结构，其中我有：实际上，我是通过Javascript（伪代码）实现的： SUB_Content.height=ParentDiv.height-SUB_Header.height-SUB_Footer.height 但这（使用户外照明等）需要很多时间我正在尝试使用CSS来实现它，比如： #REST OF THE SITE ... 100% 100% #PARENT_DIV { width: 300px; height: 300px; border:1px sol

我需要在我的站点内创建一个子结构，其中我有：

实际上，我是通过Javascript（伪代码）实现的： SUB_Content.height=ParentDiv.height-SUB_Header.height-SUB_Footer.height

但这（使用户外照明等）需要很多时间

我正在尝试使用CSS来实现它，比如：

#REST OF THE SITE ... 100% 100%
#PARENT_DIV { width: 300px; height: 300px; border:1px solid red;}
#HEADER { background: orange; height: 63px; float:left; width: 100%; }
#CONTENT { background:blue; padding-top: 63px; height: 100%; box-sizing: border-box;  }
#FOOTER { background:pink; height:50px; box-sizing: border-box; margin-top:-50px;}

即使我为页眉和页脚设置了一个固定的大小，内容也会得到整个“父大小”。我无法使用固定或绝对定位

我尝试了很多方法，但没有取得任何成果

大多数尝试给我的结果如下：

我是否可以遵循任何教程/角色将内容大小固定为100%-header.height-footer.height

通常内容比父div大，如果他放一些滚动条就可以了。我已经尝试了所有的“显示：表行”等

这是一种“类似”的结构：

<!DOCTYPE html>
<html>
<head>
 <style>
 #PARENT_DIV { width: 300px; height: 300px; border:1px solid red;}
 #HEADER { background: orange; height: 63px; float:left; width: 100%; }
 #CONTENT { background:blue; padding-top: 63px; height: 100%; box-sizing: border-box; overflow:auto; }
 #FOOTER { background:pink; height:50px; box-sizing: border-box; margin-top:-50px;}
</style>
</head>
<body>

 <div id="PARENT_DIV">
 <div id="HEADER">
   HUGE CONTENT
 </div>
<div id="CONTENT">
VERY HUGE TABLE
</div>
<div id="FOOTER">
</div>
</div>
</body>
</html>


#父分区{宽度：300px；高度：300px；边框：1px实心红色；}
#标题{背景：橙色；高度：63px；浮动：左侧；宽度：100%；}
#内容{背景：蓝色；填充顶部：63px；高度：100%；框大小：边框框；溢出：自动；}
#页脚{背景：粉红色；高度：50px；框大小：边框框；页边顶部：-50px；}
庞大的内容
非常大的桌子

我想这就是你想要的：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #PARENT_DIV {
            background-color: #333333;
            border: 1px solid red;
            height: auto;
            padding: 28px;
            position: absolute;
            width: 300px;
            color: #cacaca;
        }

        #HEADER {
            background: none repeat scroll 0 0 orange;
            float: left;
            min-height: 63px;
            width: 100%;
        }

        #CONTENT {
            background: none repeat scroll 0 0 blue;
            max-height: 500px;
            min-height: 100px;
            overflow: auto;
        }

        #FOOTER {
            background: pink;
            height: 50px;
            box-sizing: border-box;
            width: 100%;
            bottom: 0;
        }

        body {
            background-color: #bababa;
        }

        .clear {
            clear: both;
        }
    </style>

</head>
<body>

    <div id="PARENT_DIV">
        Parent Div
        <br />
        <div id="HEADER">
            Header
        </div>
        <div class="clear"></div>
        <div>
            <div id="CONTENT">
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
                VERY HUGE TABLE<br />
            </div>
        </div>
        <div id="FOOTER">
            Footer
        </div>
    </div>
</body>
</html>


#家长组{
背景色：#333333；
边框：1px纯红；
高度：自动；
填充：28px；
位置：绝对位置；
宽度：300px；
颜色：#cacaca；
}
#标题{
背景：无重复滚动0 0橙色；
浮动：左；
最小高度：63px；
宽度：100%；
}
#内容{
背景：无重复滚动0 0蓝色；
最大高度：500px；
最小高度：100px；
溢出：自动；
}
#页脚{
背景：粉红色；
高度：50px；
框大小：边框框；
宽度：100%；
底部：0；
}
身体{
背景色：#巴巴巴；
}
.清楚{
明确：两者皆有；
}
上级部门


标题
非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

非常大的桌子

页脚

注意：此外，您可以将父分区的高度和宽度设置为98%，以适合您的屏幕