我试图将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 }
解决方法
这是
flexbox的一个很好的用例.只需将grid元素的父元素的display属性设置为flex,如下所示：
.pure-g {
display: flex;
}
并且网格元素的高度将被标准化.
正如其他人已经建议的那样,您也可以通过将所涉及元素的显示属性设置为各自的表格对应来实现类似的结果,实质上将您的网格转换为假表格.
除此之外,没有办法用CSS标准化列高度,而没有从内容流中取出(一个)元素,这可能是不可取的.
在CSS中,高度：100％并不像人们期望的那样.除非直接父级具有声明的显式高度,否则任何百分比高度都不会解析为实际高度,但由于您具有动态内容高度,因此您不能/不应设置静态值.
您可以通过使用javascript动态地将父级的高度设置为最高子级的高度来解决这个问题,从而使百分比高度在其中工作,但这是一个完全不同的问题.
