PureCSS网格框不是100％可变内容的高度 [英] PureCSS grid boxes not 100% height with variable content

问题描述

我正尝试将purecss（purecss.io）整合到wordpress中，并且我有设置网格框100％高度的问题。我应用了一个灰色背景（奇数/偶数nth-child css属性），它清楚地显示了盒子内可变内容的问题。

如何设置盒子100 ％高度，这样我可以统一应用背景？

在屏幕截图中，我希望网格框显示搜索窗体为100％高度，以便整个背景为灰色。

 < widgets class =pure-g> 
< div id =search-2class =pure-u-1 pure-u-md-1-2 l-box widget widget_search>< form role =searchmethod = getid =searchformclass =searchformaction =http：// localhost / wp /> 
< div> 
< label class =screen-reader-textfor =s>搜寻：< / label> 
< input type =textvalue =name =sid =s/> 
< input type =submitid =searchsubmitvalue =Search/> 
< / div> 
< / form>< / div> < div id =recent-posts-2class =pure-u-1 pure-u-md-1-2 l-box widget widget_recent_entries> < h2>近期文章< / h2> < UL> 
< li> 
< a href =http：//localhost/wp/index.php/2015/08/25/wordpress-themes-are-just-being-released-today/> WordPress主题正在今天在全球发布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/>标记：HTML标记和格式设置< / a> ; 
< / li> 
< li> 
< a href =http：//localhost/wp/index.php/2013/01/10/markup-image-alignment/>标记：图像对齐< / a> 
< / li> 
< li> 
< a href =http：//localhost/wp/index.php/2013/01/09/markup-text-alignment/>标记：文字对齐< / a> 
< / li> 
< / ul> 
< / div> 
< / widgets> 
  

我用这个CSS代码将灰色背景颜色应用于奇怪的窗口小部件。

  / **前页小部件*** / 
 
 .widget {font-size：1.7vw; } 
 
 .gray {background：#eee; } 
 
 
 .widget img {
 display：block; 
 margin：20px; 
 
 $ b .widget：nth-​​child（odd）{background：#eee} 
 
 .widget p {overflow：hidden; margin-left：2em;显示：块} 
 
 
 .widget h2 {margin：0; padding-bottom：0.7em} 
  

解决方案

用于 flexbox 。只需将网格元素的父元素的显示属性设置为 flex ，如下所示：

  .pure-g {
 display：flex; 
} 
  

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

正如其他人已经建议的那样，您可能也可以通过将相关元素的显示属性设置到它们各自的表中来获得类似的结果同行，基本上把你的网格变成一张假表。除此之外，没有办法用CSS标准化列高，而没有从内容流中取出（其中一个）元素，这可能是不希望的。

在CSS中， height：100％并不像一个人期望。任何百分比高度都不会解析为实际高度，除非它们的直接父级具有明确的 height 声明，但由于您具有动态内容高度，因此不能/不应设置静态值。

你可以通过使用javascript来动态设置父级的高度到最高的孩子，因此百分比的高度在里面工作，但这是一个完全不同的问题。

I am trying to integrate purecss (purecss.io) into wordpress and i have problems setting grid boxes 100% height. I apply a gray background (odd/even nth-child css property) and it clearly shows the problem with variable content inside the boxes.

How do i set the boxes 100% height, so that i can apply background uniformly?

In the screenshot, i want the grid box showing search form to be 100% height so that entire background is gray.

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

I apply gray background color to odd widgets with this css code

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

解决方案

This is an excellent use case for flexbox. Just set the display property of the parent of the grid elements to flex, like so:

.pure-g {
  display: flex;
}

And the heights of the grid elements will be normalized.

As others have suggested already, you might also be able to achieve similar results by setting the display properties of involved elements to their respective table counterparts, essentially turning your grid into a fake table.

Other than that there's no way to normalize column heights with CSS without taking (one of) the elements out the content flow, which may not be desired.

In CSS, height: 100% doesn't quite behave as one would expect. Any percentual height won't resolve to an actual height unless their direct parent has as explicit height declared, but since you have dynamic content height you cannot/should not set a static value.

You could work around this by using javascript to dynamically set the height of the parent to the height of the tallest child, thus making percentual heights work inside of it, but that's an entirely different question.

这篇关于PureCSS网格框不是100％可变内容的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！