让容器伸展到浏览器的底部

时间:2015-07-09 16:21:02

标签: html css

我正在帮助朋友在网站上工作。我对此非常陌生,无法将白色容器拉伸到浏览器页面的最底层。

以下是link

html, body {
	background-color: transparent;
	text-align:center;
	text-rendering: optimizelegibility;
	margin: 0px;
}
			
#wrapper {
    width: 100%;
    max-width: 1088px;
    margin: 0 auto;
}

#sitecontainer {
	position: relative;
	background-color: rgba(255,255,255,0.84);
	width: 80%;
	max-width: 1038px;
	margin: 0 auto;
	height: 100%;
	padding-right: 30px;
	padding-left: 30px;
	top: 0;
	min-height: 100%;
	
} 

main {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    line-height: 1.4;
    position: relative;
}		
				
a {
	font-family: 'roboto', sans-serif;
	font-weight: 500;
    color:#3d7109;
	text-transform:uppercase;
	text-decoration: none;          
}
			
a #footer{
	font-family: 'roboto', sans-serif;
	font-weight: 300;
	text-decoration:none;
	text-transform:none;
}
			
a:hover {
    opacity: 0.7;
}

header img {
  	width: 100%;
  	max-width: 300px;
	font-style: none;
	padding-top: 30px;
}
			
header h2 {
    font-family: 'roboto', sans-serif;
	font-weight: 500;
    font-size: 14px;
    text-align: center;
}
          
h1 {
    font-family: 'roboto', sans-serif;
	font-weight: 300;
    text-transform: uppercase;
    text-align:center;
	font-style:normal;
}

/* ===================
    Nav
   =================== */
                      
nav {
	margin: auto;
	margin-bottom: 30px;
	max-width: 700px;
	width: 100%;
	text-align: center;
	margin-bottom: 30px;
}

#menu {
    padding: 0;
	margin-right: 10px;
	margin-left: 10px;
}

#menu li {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 5px;
    font-size: 17px;
	text-align: center;
}

#menu li:last-child {
    margin-right: 0;
}            

	/* ===================
    Content
   =================== */

p {
    font-family: 'roboto', sans-serif;
	font-weight: 300;
    text-align:center;
}   
   
.indexpage article { 
    margin-bottom: 85px;
}

article:before {
    content: "";
    display: block;
    background: #3f474c;
    width: 6px;
    height: 1px;
    margin-bottom: 16px;
}

.permalinkpage article:before {
    margin: 0 auto 16px;
}

.permalinkpage .post {
    margin: auto;
    font-size: 14px;
	letter-spacing: 0.9px;
}

.permalinkpage p {
    margin: 24px 0;
}

/* Text */

.permalinkpage .text .post {
    width: 100%;
    max-width: 500px;
    margin: auto;
}
<div id="wrapper">
        <div id="sitecontainer" height="100%">
        
        
		<!---------- HEADER / LOGO ---------->
        
        <header class="wrapper clearfix"> 
            <section id="blog-title">
                <h1 style="margin-top: 0px; margin-bottom: 0px;">
                    <img src="files/images/logo.gif" alt="Healing by Andrea"/>        
                </h1>
            </section>
        </header>
            
		<!---------- NAV START ---------->
        <nav> 
                <ul id="menu"> 
                        <li>
                            <a href="INSERT LINK" class="page">Home</a>
                        </li>
                        <li>
                            <a href="INSERT LINK" class="page">Crystals</a>
                        </li>
                        <li>
                            <a href="INSERTLINK" class="page">Bio</a>
                        </li>
                        <li>
                            <a href="INSERT LINK" class="page">Rates</a>
                        </li>
                        <li>
                            <a href="INSERT LINK" class="page">Gallery</a>
                        </li>
                        <li>
                            <a href="INSERT LINK" class="page">Testimonials</a>
                        </li>
                        <li>
                            <a href="INSERT LINK" class="page">Contact</a>
                        </li>
                </ul>
            </nav> 
            <!---------- NAV END ---------->
            
            
        <main class=" permalinkpage"> 
        
        	<!---------- CONTENT ---------->
            
                <div class="grid-sizer"></div>
                <article class="text">
                    <section class="post">
                            <h1 class="post-title" >"What is Reiki?"</h1>
                            
<article class="type_description"><div class="article-content">
<div class="boxed">
<p>The word Reiki is made of two Japanese words - Rei which means "God's Wisdom or the Higher Power" and Ki which is "life force energy". So Reiki is actually "spiritually guided life force energy."
</p>
<p>A treatment feels like a wonderful glowing radiance that flows through and around you. Reiki treats the whole person including body, emotions, mind and spirit creating many beneficial effects that include relaxation and feelings of peace, security and wellbeing. Many have reported miraculous results.
<br>
Reiki is a simple, natural and safe method of spiritual healing and self-improvement that everyone can use. It has been effective in helping virtually every known illness and malady and always creates a beneficial effect. It also works in conjunction with all other medical </p>
</div>
</div>
</article><!-- Javascript Assets --><p>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js" type="text/javascript"></script><script src="http://static.tumblr.com/e6lc7yi/7rPn0ryx1/gobig-plugins.js" type="text/javascript"></script></p>
                            <section class="post-meta">
                            </section> 
                    </section>
                </article>
        </main>
        </div>
    </div>

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

N := 30 //Repeat 30 times per second
for {
    //Do something
    time.Sleep(time.Second * time.Duration(N))
}

添加这些将有助于您实现

之后的目标