如何將3 div顯示為“子標題”，“子腳注”，“子內容”

Question

我需要在站點內部創建一個子結構，其中：

實際上，我是通過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定位。

我嘗試了很多方法，但沒有取得任何成就。

大多數嘗試都會給我這樣的結果：

在此處輸入圖片說明

我可以按照任何教程/角色將內容的大小固定為100％-header.height-footer.height嗎？

通常，其內容要比Parent 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 個解決方案

解決方案1
1 2014-01-28 09:59:09

如何將3 div顯示為“子標題”，“子腳注”，“子內容”

問題描述

1 個解決方案

解決方案1 1 2014-01-28 09:59:09

解決方案1
1 2014-01-28 09:59:09