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设置为最高子级的高度来解决这个问题，从而使百分比高度在其中工作，但这是一个完全不同的问题。

Answer 2

我已经有了这样做的方法，首先制作这些div display: table-cell 。 这将使它们相等height 。对于较低移动设备分辨率的网站响应能力，您可以使用 @media查询将div设置回display: block

请参阅live example我的意思。

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

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

Answer 4

这会起作用， HTML

<div class="pure-g hellodiv">   

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

CSS

html,body{height:100%;margin:0 auto;}
.hellodiv {
  display: table;background-color:red;height:100%;
}
#search-2, #recent-posts-2 {
  display: table-cell;
}
/** 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 5

有时会有这样的布局，你需要absolute或fixed定位，我会去固定，因为div将始终保持全高：

.widget_search { position:absolute; top:0; bottom:0; width:15em; }

Answer 6

在你的css中添加以下自定义css。

$('#your_button').button('widget');

Answer 7

这可以通过flex-box实现。 https://jsfiddle.net/pt9q18j9/

flexbox有两个部分，容器和容器中的项目

设置容器，在这种情况下widgets为display:flex;

widgets{
  display: flex;
}

然后您要并排显示的项目将获得flex-basis属性。在每个上设置值为1意味着它们将默认为相同的大小，如果为搜索设置为1，为条目设置为2，则条目将尝试占用两倍的空间

.widget .widget_search {
  flex-basis: 1;   
}
.widget .widget_recent_entries {
  flex-basis: 1; 
}

这是关于flex-box https://css-tricks.com/snippets/css/a-guide-to-flexbox/

的非常好的文章

PureCSS网格框不是100％高度，内容可变

7 个答案: