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

回答

相關問題