960gs填充Div垂直CSS

我知道这个CSS问题已被问到互联网上到处都是。但是我有巨大的困难，使得紫色和绿色的div填补他们的剩余空间，所以它们是相同的高度黄色Twitter的饲料：960gs填充Div垂直CSS

HTML

<div id="main"> 
    <div id="primary" class="home"> 
     <div id="content" role="main"> 
      <div id="main-content" class="container_12"> 
       <div id="info" class="grid_4"> 
        <div id="networking"> 
          <h2>RSViP - Business Networking</h2> 

         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus lobortis orci, sed vestibulum leo dapibus et. Fusce in dolor velit, sit amet vehicula est. Integer elit sapien.</p> <a href="">Apply for Business Networking</a> 
    <a href="">Free Trial</a> 

        </div> 
        <div id="card"> 
          <h2>RSViP - Card</h2> 

        </div> 
       </div> 
       <div id="twitter" class="grid_4"> 
         <h2>News/Twitter Feed</h2> 

        <ul> 
         <li> 
          <p>Details of our next Business Network Social &amp; 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a> 

          </p> 
          <p id="date">3rd Apr 04:57 PM</p> 
         </li> 
         <li> 
          <p>Details of our next Business Network Social &amp; 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a> 

          </p> 
          <p id="date">3rd Apr 04:08 PM</p> 
         </li> 
         <li> 
          <p>Details of our next Business Network Social &amp; 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a> 

          </p> 
          <p id="date">3rd Apr 03:28 PM</p> 
         </li> 
         <li> 
          <p>Details of our next Business Network Social &amp; 5th Birthday have been finalised- Invitations going out tomorrow to members <a href="http://www.twitter.com/HartsNottingham" target="_blank">@HartsNottingham</a> 

          </p> 
          <p id="date">3rd Apr 03:28 PM</p> 
         </li> 
        </ul> 
       </div> 
       <div id="col3" class="grid_4"> 
         <h2>RSViP Free Subscription</h2> 

       </div> 
      </div> 
     </div> 
    </div> 
</div>

CSS

.home #main-content { 
    margin-top: 23px; 
    margin-bottom: 23px; 
    height: 100%; 
} 

/*Col1 - Info*/ 
.home #info { 
    width: 270px; 
    padding-right: 30px; 
    background: url('images/divider.png') repeat-y top right; 
    height: 100%; 
    background: purple; 
} 

/*Col2 - Twitter*/ 
.home #twitter { 
    padding-left: 10px; 
    width: 290px; 
    background: yellow; 
} 

.home #twitter ul { 
    list-style: none; 
    margin: 0; padding: 0; 
} 

/* Col3 */ 
.home #col3 { 
    background: green; 
} 

/* 960.gs */

谢谢Peter

来源

2013-04-03 ptimson

您可以用图像来做到这一点。阅读关于[虚拟列]（http://alistapart.com/article/fauxcolumns） – anpsmn 2013-04-03 19:07:22

我可以但需要填补左右divs的背景 – ptimson 2013-04-03 19:39:11

那么你可以为所有三个div添加一个共同的类，并给出最小高度在这种情况下，最小高度将是Twitter的饲料的高度 – anpsmn 2013-04-03 19:44:20

继承人我的解决方案/哈克奏效：

.home #main-content { 
    margin-top: 23px; 
    margin-bottom: 23px; 
    overflow: hidden; 
} 

.home #main-content div { 
    padding-bottom: 9999px; 
    margin-bottom: -9999px; 
}

来源

2013-04-03 20:14:19 ptimson

-1

你可以使用jquery来简化操作。 http://jsfiddle.net/Bushwazi/tuKEJ/

$('#main-content > div').height($('#main-content').height());

来源

2013-04-03 19:19:43

是的，我想用CSS来做到这一点。 – ptimson 2013-04-03 19:35:36

960gs填充Div垂直CSS

回答

相关问题