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>

还可以找到这个小提琴的代码http://jsfiddle.net/59e9x/

Answer 1

您可以将媒体查询添加到仅定位移动设备

更新小提琴：http://jsfiddle.net/59E9x/1/

html接收min-height：100％;

html {
    min-height: 100%;
}

面板保持100％高度

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

对于移动设备，我们将其设置为50％。

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

我不会为bootraps默认类添加额外的样式（例如：col-sm-8，col-sm-4）。这些构建要做的事情并不建议改变行为

引导多个网格行的一致100％高度

1 个答案: