Question

所以我正在尝试为我正在进行的网络重新设计制作响应式网格布局。我开始布置一些占位符，可以在jsfiddle here中找到。

宽度很好;我究竟想要它。

.half-cell {

        height:70%;

        width:50%;
        background-color: #458bff;
        float: left;
        display:inline;

        background-size:cover;


        }

        .quarter-cell-horiz {
            height:35%;                
            width:50%;
            float: left;
            display:inline;
            background-color:#373737;

        }

但是，我注意到我身高的一些问题。我注意到在某些高度，占位符跳出了原位。我认为这是因为它无法在每个高度测量出完美的70％，它的宽度可以达到50％。

我试图找到一种方法可以防止这种情况发生，同时与每个占位符保持特定的比例。最好，我想使用CSS。

任何可以提供的帮助都会很棒。谢谢你看这个！

Answer 1

<强> DEMO

就像100％宽度等于窗口宽度一样，我们必须确保高度相同！通过应用此css：

html, body{ height: 100%; }

确保以百分比给出高度的任何元素将取决于窗口高度，除非其父级具有定义的特定高度（必须是正文的第一级子级）。

我创建了一个名为vertical-row的类，它将创建100％高度的部分，然后您可以使用它来定义50％的高度，依此类推。您可以继续使用垂直行 - 一半来获取50％，以此类推垂直网格系统。

响应式网格高度问题

1 个答案: