PureCSS网格框不100%高且内容可变

Question

我正在尝试将purecss (purecss.io)集成到wordpress中，并且设置网格框100%高度时有问题。我应用了一个灰色背景(奇数/偶数n个子css属性)，它清楚地显示了框内可变内容的问题。

如何设置方框100%的高度，以便我可以统一应用背景？

在屏幕截图中，我希望显示搜索表单的网格框是100%的高度，所以整个背景都是灰色的。

​

​

<widgets class="pure-g">      
<div id="search-2" class="pure-u-1 pure-u-md-1-2 l-box widget widget_search"><form role="search" method="get" id="searchform" class="searchform" action="http://localhost/wp/">
                <div>
                    <label class="screen-reader-text" for="s">Search for:</label>
                    <input type="text" value="" name="s" id="s" />
                    <input type="submit" id="searchsubmit" value="Search" />
                </div>
            </form></div>       <div id="recent-posts-2" class="pure-u-1 pure-u-md-1-2 l-box widget widget_recent_entries">     <h2>Recent Posts</h2>       <ul>
                    <li>
                <a href="http://localhost/wp/index.php/2015/08/25/wordpress-themes-are-just-being-released-today/">WordPress themes are just being released today all over the World 1200 GMT</a>
                        </li>
                    <li>
                <a href="http://localhost/wp/index.php/2015/08/24/hello-world/">Hello world!</a>
                        </li>
                    <li>
                <a href="http://localhost/wp/index.php/2013/01/11/markup-html-tags-and-formatting/">Markup: HTML Tags and Formatting</a>
                        </li>
                    <li>
                <a href="http://localhost/wp/index.php/2013/01/10/markup-image-alignment/">Markup: Image Alignment</a>
                        </li>
                    <li>
                <a href="http://localhost/wp/index.php/2013/01/09/markup-text-alignment/">Markup: Text Alignment</a>
                        </li>
                </ul>
        </div>
</widgets>

我使用此css代码将灰色背景颜色应用于奇数小部件。

/** Front page widgets ***/

.widget {   font-size: 1.7vw; }

.gray { background: #eee;  }


.widget img {
display:block;
margin: 20px;
}

.widget:nth-child(odd) { background: #eee }

.widget p { overflow:hidden; margin-left: 2em; display: block }


.widget h2 { margin:0; padding-bottom: 0.7em }

Answer 1

对于挠曲箱来说，这是一个很好的用例。只需将网格元素的父元素的display属性设置为flex，如下所示：

.pure-g {
  display: flex;
}

网格元素的高度将被标准化。

正如其他人已经建议的那样，您也可以通过将涉及的元素的display属性设置为相应的表对应方，从而实现类似的结果，这实际上是将网格转换为一个假表。

除此之外，如果不从内容流中提取(其中之一)内容流，就无法使用CSS规范列高，这可能是不需要的。

在CSS中，height: 100%的行为并不像人们所期望的那样。任何百分比高度都不会解析为实际高度，除非它们的直接父级具有显式height声明，但是由于您具有动态内容高度，所以不能/不应该设置静态值。

您可以通过使用javascript动态地将父级的height设置为最高的子级的高度来解决这个问题，从而使百分比高度在其中工作，但这是一个完全不同的问题。

Answer 2

这里我有一个方法，首先要做那些div display: table-cell.这将使它们成为相等的height. 如果您的网站具有较低的移动分辨率，可以使用@media 查询将div设置为 display: block。

看实例化我的意思。

由于height的原因，您将在相等的display: table-cell中看到两个div，但是当您拖动结果窗口的左边框使其宽度变小时，您将在窗口宽度:500 on 上看到它们在下一行中断。您还可以根据需要完全控制此行为。

#search-2, #recent-posts-2 { /* or you can simply use .widget here */
    padding: 20px;
    display: table-cell;
}

@media all and (max-width: 500px) {
    #search-2, #recent-posts-2 {
        display: block;
    }
}

Answer 3

widget {
  display: table;
}
#search-2, #recent-posts-2 {
  display: table-cell;
}

工作小提琴https://jsfiddle.net/bj1kqn6k/4/