响应式网格高度问题

Question

因此，我正在尝试为正在处理的Web重新设计响应式网格布局。 我开始布置一些占位符，可以在这里的jsfiddle中找到它们 。

宽度很好； 正是我想要的。

.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％的宽度下却无法测量出完美的70％。

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

你们所有人都可以提供的任何帮助都会很棒。 感谢您的关注！

Answer 1

演示

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

html, body{ height: 100%; }

将确保您以百分比形式给出的任何高度的元素都将取决于窗口高度，除非其父级定义了特定的高度（必须是body的第一级子级）。

我创建了一个名为vertical-row的类，该类将创建100％高的部分，然后您可以使用该部分定义50％的高度，以此类推。 您可以继续进行操作，使垂直行的一半减少50％，以此类推。