Question

JSFiddle示例：https://jsfiddle.net/e2h6cwu9/

<section id="mainContainer">
        <!-- Dashboard Section -->
        <div class="dashboard">
            <div class="gridster">
                <ul>
                    <li data-row="1" data-col="1" data-sizex="2" data-sizey="2"><h1>PROJECT LOAD PER PERSON</h1></li>
                    <li data-row="1" data-col="2" data-sizex="2" data-sizey="2"><h1>RTN LOAD PER PERSON</h1></li>
                    <li data-row="1" data-col="3" data-sizex="2" data-sizey="2"><h1>TICKET LOAD PER PERSON</h1></li>

                    <li data-row="2" data-col="1" data-sizex="2" data-sizey="2"><h1>RTN LIFESPAN PER PERSON</h1></li>
                    <li data-row="2" data-col="2" data-sizex="2" data-sizey="2"><h1>TICKET LIFESPAN PER PERSON</h1></li>
                    <li data-row="2" data-col="3" data-sizex="2" data-sizey="2"><h1>UNTOUCHED FOR 7 DAYS</h1></li>
                </ul>
            </div>
        </div>

        <!-- Projects Section -->
        <div class="projects">
            <span>PROJECT STUFF</span>
        </div>

        <!-- RTNs Section -->
        <div class="rtns">
            <span>RTN STUFF</span>
        </div>

        <!-- Tickets Section -->
        <div class="tickets">
            <span>TICKET STUFF</span>
        </div>

        <div id="footer">
            <span>This needs to fall under the gridster </span>
        </div>
    </section>

我试图将内容放在我的.gridster DIV下，但由于它的父DIV .dashboard没有高度，而且我的#mainContainer部分的位置是静态的，没有高度，那格栅DIV也没有高度？如何在没有为包装器指定指定高度的情况下使#footer div在.gridster DIV下？

非常感谢任何帮助！

Answer 1

Gridster自动设置其ul的高度，使其完全按照您的要求进行操作，但是您的规则将覆盖其中

.gridster ul {
   list-style: none;
   height: auto !important;
   width: 100% !important;
   display: block;
}

如果您删除了height: auto !important;，那么您已经完成了设置。

在没有指定高度的静态定位div之后定位元素

1 个答案: