如何使用auto：height和overflow：auto制作一个可扩展的网站

Question

我正在尝试创建一个可垂直扩展的网站，以便可以添加模块并调整页面大小。我一直试图通过玩绝对定位，自动高度和自动溢出来实现这一目标。问题是，在某些时候你似乎必须定义至少一个高度......一旦发生这种情况，该网站就不再完全可扩展。在下面的代码中，您可以看到它基本上都是可扩展的，直到您到达容器（已折叠）。这个div的主要目的是将所有内容集中在页面上，然后内容绝对定位于内部。我不想给容器一个高度，但它只是不承认里面的内容。我怎样才能做到这一点？

ps.疯狂的颜色仅用于构建和测试。

HTML

<div id="container">
    <div id = "contentHolder">
        <div id="header" >
            <h1>This is a heading</h3>
        </div>
        <div id="moduleContainer">
            <div id= "myModule">
                <div id= "moduleHeader">
                    <p class="p1">Who We Are 
                    <span class="p2">Learn more about Trinity</span></p>
                    </div> 
                    <div id= "moduleBody" >
                    <p class="p3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras fringilla tempus hendrerit.
                     Mauris sed felis vel orci bibendum semper vel eget tortor. Ut adipiscing interdum tellus ac pulvinar. 
                     Suspendisse sit amet hendrerit lectus. In felis felis, venenatis luctus varius ut, accumsan sit amet tellus. 
                     Integer ac gravida sem. Vivamus orci turpis, tempus sit amet tincidunt ultrices, interdum luctus dolor.
                      Suspendisse sit amet hendrerit lectus. In felis felis, venenatis luctus varius ut, accumsan sit amet tellus. 
                     Integer ac gravida sem. Vivamus orci turpis, tempus sit amet tincidunt ultrices, interdum luctus dolor.
                        </p>

                        <div id="mod_Image" ><img src="churchImg.jpg" style="height:100%; width:100%; "/></div>
                    </div>
            </div><!---end myModule---->
        </div><!---end moduleContent---->

        <div id="moduleContainer">
            <div id= "myModule">
                <div id= "moduleHeader">
                    <p class="p1">Who We Are 
                    <span class="p2">Learn more about Trinity</span></p>
                    </div> 
                    <div id= "moduleBody" >
                    <p class="p3">
                    The United Church of Christ acknowledges as its sole head, Jesus Christ, Son of God and Savior. 
                    It acknowledges as kindred in Christ all who share in this confession. It looks to the Word of 
                    God in the Scriptures, and to the presence and power of the Holy Spirit, to prosper its creative 
                        </p>

                        <div id="mod_Image" ><img src="churchImg.jpg" style="height:100%; width:100%; "/></div>
                    </div>
            </div><!---end myModule---->
        </div><!---end moduleContent---->

     </div><!---end contentHolder---->
</div><!---end container---->

CSS

#container 
        {
            text-align:center; 
            margin-left:auto; 
            margin-right:auto; 
            background-color:purple; 
            width:1330px; 
            height:auto; 
            position:relative; 
            padding:20px;

        }

        #contentHolder 
        { 
            width:1200px; 
            height:auto; 
            background-color:green;         
            padding:40px; 
            position:absolute; 
            top:20px; 
            left:20px;  
            overflow:auto;
        }

        #header
        {
            width:100%; 
            height:200px; 
            background-color:yellow; 
            overflow:auto;
        }

        #moduleContainer 
        {
            width:1200px; 
            height:auto; 
            background-color:red; 
            float:left; 
            overflow:auto; 
            padding-bottom:40px;
            border-bottom:thin dashed white;
        }

        #myModule
        {
            height:auto;  
            width: 1000px; 
            overflow:auto;
        }

        #moduleHeader 
        {
            width:100%; 
            height:auto; 
            overflow: auto;
        }

        #moduleBody 
        {
            background-color:#0E1031; 
            width:800px; 
            height:auto; 
            margin-left:auto; 
            margin-right:auto; 
            padding:40px;
            border:thick solid #1B1851;  
            border-radius: 15px; 
            overflow: auto;
        }

        #mod_Image 
        {
            height:200px; 
            width:200px;
            margin-left:40px; 
            float:left; 
            border:thick solid white;
        }

        .p1
        {
            text-align:left; font-family:Arial; font-size:22px; font-size:30px; color:#191970;margin-left:80px;"
        }

        .p2
        {
            color:#999; font-size:20px; font-weight:bold;
        }

        .p3
        {
            text-align:justify; height:150px; width:500px;   font-family:Arial; font-size:14px; line-height:150%; float:left; color:white; 
        }
        h1 
        {
            text-align:left; padding:60px; color:green;
        }

Answer 1

从#contentHolder {postion:absolute;}

中删除绝对位置