響應式網格高度問題

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％，以此類推。