Question

我需要在我的网站中创建一个子结构：

Result

其实我是通过Javascript之类的（伪代码）来做的： SUB_Content.height = ParentDiv.height - Sub_Header.height - sub_Footer.height

但是（使用outerHeight等）需要花费很多时间。

我正在尝试使用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;}

即使我为页眉和页脚设置了固定大小，内容也会获得整个“父亲大小”。我无法使用FIXED或ABSOLUTE定位。

我在很多方面尝试过但没有取得任何成就。

大多数尝试都会给我一个这样的结果：

enter image description here

我是否可以使用任何教程/角色将内容的大小修改为100％ - header.height - footer.height？

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

这是一个“相似”的结构：

<!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>

Answer 1

我认为这就是你想要的：

<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>

注意：此外，您可以将PARENT_DIV的高度和宽度设置为98％以适合您的屏幕。

如何将3 div显示为“子标题”，“子页脚”，“子内容”

1 个答案: