Question

我知道这个CSS问题已经在互联网上随处可见。但是我很难让紫色和绿色的div填充剩余的空间，所以它们与黄色的twitter feed一样高：

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 */

谢谢你，彼得

Answer 1

继承我的解决方案/ Hack工作：

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

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

Answer 2

您可以使用jquery轻松完成。 http://jsfiddle.net/Bushwazi/tuKEJ/

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

960gs填充Div垂直CSS

2 个答案: