使元素垂直跨越整个容器

所以你可以看到我目前在这里：https://steelcowboy.me 使元素垂直跨越整个容器

基本上我想要的是一个白色的内容区域，灰色的两侧和我的蓝色导航栏。我不想在白色部分顶上或下面留下任何灰色（即，我只想在侧面灰色，在中间白色）。然而，我不知道我需要做什么 - 我尝试了不同的容器元素display选项，但工作（flex）然后混淆了内部的所有内容。我觉得这是一个非常简单的解决方案，但似乎无法得到它。任何人都有答案？谢谢！

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Steelsite</title> 
     <meta charset="utf-8"> 
<link href="/css/materialize.min.css" rel="stylesheet"> 
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script type="text/javascript" src="/js/materialize.min.js"></script> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="theme-color" content="#3f51b5"> 
<style>html,body { height:100%; margin:0; } a {font-weight: bold;} body {background-color:#e0e0e0;} img {max-width:100%; height:auto;} </style> 
    </head> 
    <body> 
    [navbar in here] 
<main> 
      <div class="container white"> 
       <h3 class="center-align">Welcome to the site of James Heald</h3> 


       <div class="row"> 

        <div class="col s12 m6"> 
         <div class="flow-text" style="font-size: 125%;"> 
          <p>I'm a teen who loves bike riding, photography, travel, outdoor activities and computers! In September I will be attending Cal Poly SLO, majoring in Aerospace Engineering.</p> 
<p>This site, currently under construction using the Materialize framework, is proudly hosted on the Raspberry Pi 2, pictured below.</p>      </div> 
        </div> 

        <div class="col s12 m6"> 
         <div class="center-align"> 
          <img style="padding-top:1%; padding-bottom:1%;" class="responsive-img materialboxed" src="pictures/pi2.jpg" alt="The new home of steelcowboy.me!"></div> 
        </div> 

       </div> 

       <div class="divider"></div> 

       <h5>From running "fortune":</h5><p class="flow-text" style="font-size: 115%;">Real Users find the one combination of bizarre input values that shuts 
down the system for days. 
       </p> 
       <div class="container center-align"> 
        <img src="http://imgs.xkcd.com/comics/tags.png" class="responsive-img"> 
       </div> 
      </div> 
     </main> 
     <script src="scripts/google.js"></script> 
    </body> 
</html>

来源

2015-05-11 steelcowboy

能否请您告诉我们您的CSS为好，并创建一个[的jsfiddle（http://jsfiddle.net）（或类似）演示你的问题？ –

目前我没有针对你的解决方案，但是h3有一个强制空白的余量。 – Quintile

我用Materialise的CSS，所以除了在那里的一切只有等CSS是我的'