css - 引导多网格行的一致 100% 高度

Question

我正在尝试设计一个简单的响应式设计，由两个面板组成，对于中型到大型屏幕，这两个面板应并排放置，对于类似手机的屏幕，一个面板应位于另一个面板之上。

面板并排时，它们的高度应为 100%，堆叠时，它们的高度应为 50%。

问题是对于中型和大型屏幕，div 的高度保持在 50% 而不是 100%。 最后我想把整个屏幕分成两个彩色部分。现在这只发生在超小屏幕上。

谢谢!

CSS

html, body, .container, .row {
height: 100%;
}

.left-panel{
    background-color: red;
}

.right-panel{
    background-color: teal;
}

.col-sm-8 .col-sm-4 .col-lg-9 col-lg-3{
    height: 100%;
}
.col-xs-12{
    height: 50%;
}

HTML

<div class="container">
<div class="row">
    <div class="col-sm-8 col-lg-9 col-xs-12 left-panel">
        left panel
    </div>
    <div class="col-sm-4 col-lg-3 col-xs-12 right-panel">
        right panel
    </div>
</div>

也可以在这个 fiddle http://jsfiddle.net/59e9x/ 找到代码

Answer 1

您可以添加媒体查询以仅针对移动设备

更新的 fiddle :http://jsfiddle.net/59E9x/1/

html 接收最小高度:100%；

html {
    min-height: 100%;
}

面板保持在 100% 高度

.left-panel,
.right-panel {
    height: 100%;
}

对于移动设备，我们将它们设置为 50%。

@media only screen and (max-width: 400px) {
    height: 50%;
}

我不会将额外的样式附加到 Bootstrap 默认类(例如:col-sm-8、col-sm-4)。这些构建是为了做一件事并且不建议改变行为