Databases
StackOverflow2013
Postsdbo
POHow to make my a scalable website with auto:height and overflow:auto
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to make my a scalable website with auto:height and overflow:auto
    primarykey
    data
    text
    <p>I'm trying to make a site that will be vertically scalable so that modules can be added and the size of the page will adjust. I've been trying to achieve this by playing with absolute positioning, auto height, and auto overflow. The problem is that it seems at some point you have to define at least one height...and once that happens the site is no longer completely scalable. In my code below you can see that it's all basically scalable until you get to the container (which is collapsed). This div's main purpose is to center all of the content on the page, then the content is absolutely positioned inside. I don't want to give the container a height, but it's just not acknowledging the content inside. How can I make this work?</p> <p>ps.The crazy colors are just for building and testing.</p> <h2>HTML</h2> <pre><code>&lt;div id="container"&gt; &lt;div id = "contentHolder"&gt; &lt;div id="header" &gt; &lt;h1&gt;This is a heading&lt;/h3&gt; &lt;/div&gt; &lt;div id="moduleContainer"&gt; &lt;div id= "myModule"&gt; &lt;div id= "moduleHeader"&gt; &lt;p class="p1"&gt;Who We Are &lt;span class="p2"&gt;Learn more about Trinity&lt;/span&gt;&lt;/p&gt; &lt;/div&gt; &lt;div id= "moduleBody" &gt; &lt;p class="p3"&gt; 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. &lt;/p&gt; &lt;div id="mod_Image" &gt;&lt;img src="churchImg.jpg" style="height:100%; width:100%; "/&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!---end myModule----&gt; &lt;/div&gt;&lt;!---end moduleContent----&gt; &lt;div id="moduleContainer"&gt; &lt;div id= "myModule"&gt; &lt;div id= "moduleHeader"&gt; &lt;p class="p1"&gt;Who We Are &lt;span class="p2"&gt;Learn more about Trinity&lt;/span&gt;&lt;/p&gt; &lt;/div&gt; &lt;div id= "moduleBody" &gt; &lt;p class="p3"&gt; 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 &lt;/p&gt; &lt;div id="mod_Image" &gt;&lt;img src="churchImg.jpg" style="height:100%; width:100%; "/&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt;&lt;!---end myModule----&gt; &lt;/div&gt;&lt;!---end moduleContent----&gt; &lt;/div&gt;&lt;!---end contentHolder----&gt; &lt;/div&gt;&lt;!---end container----&gt; </code></pre> <h2>CSS</h2> <pre><code>#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; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USThisBetterWork
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload