PureCSS网格框不是100%高度,内容可变

Question

我试图将purecss(purecss.io)集成到wordpress中,我在设置网格框100%高度时遇到了问题.我应用了灰色背景(奇数/偶数n-child 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

这是flexbox的一个很好的用例.只需将display网格元素的父元素的属性设置为flex,如下所示:

.pure-g {
  display: flex;
}

并且网格元素的高度将被标准化.

正如其他人已经建议的那样,您也可以通过将display相关元素的属性设置为各自的表格对应来实现类似的结果,实质上将您的网格转换为假表格.

除此之外,没有办法用CSS标准化列高度,而没有从内容流中取出(一个)元素,这可能是不可取的.

在CSS中,height: 100%并不像人们期望的那样表现.除非直接父级具有显式height声明,否则任何百分比高度都不会解析为实际高度,但由于您具有动态内容高度,因此您不能/不应设置静态值.

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