0

モジュールを追加してページのサイズを調整できるように、垂直方向に拡張できるサイトを作成しようとしています。絶対配置、自動高さ、および自動オーバーフローで遊んで、これを達成しようとしています。問題は、ある時点で少なくとも 1 つの高さを定義する必要があるように思われることです...そして、それが発生すると、サイトは完全にスケーラブルではなくなります。以下の私のコードでは、コンテナー (折りたたまれている) に到達するまで、基本的にすべてスケーラブルであることがわかります。この 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