0

我正在尝试制作一个可垂直扩展的网站，以便可以添加模块并调整页面大小。我一直在尝试通过使用绝对定位、自动高度和自动溢出来实现这一点。问题是在某些时候您似乎必须定义至少一个高度......一旦发生这种情况，该站点就不再是完全可扩展的。在我下面的代码中，您可以看到它基本上都是可扩展的，直到您到达容器（已折叠）。这个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;
        }
4

1 回答 1

3

删除绝对位置#contentHolder {postion:absolute;}

于 2013-03-12T06:45:16.773 回答