问

如何创建占据整个视口高度的两行

用户qqpgrvet8m 发布于 2023-02-13 12:07

bootstrap

我正在使用Bootstrap 3以及如何创建一个布局,它在水平和垂直方向占据整个视口.

我有两排.第一个占视口高度的60%,第二个占视口的40%.所以基本上用一些ASCII艺术:

 ----------------------------
|  60% Of View Port Height   |
|                            | 
 ----------------------------
|  40% Of View Port Height   | 
 ----------------------------

我已经查看了Stack Overflow上的各种帖子,但找不到能够以响应方式在所有设备上运行的解决方案.我更喜欢原生的Bootstrap 3解决方案,但也欢迎其他解决方案.

1 个回答

一种简单的方法是为行添加所需的高度

html,
body {
    height: 100%;
}

.viewport {
    height: 100%;
}

.thick {
    height: 60%;
    color: white;
    background-color: #800;
}

.thin {
    height: 40%;
    color: white;
    background-color: #080;
}


<div class="container viewport">
    <div class="row thick">
        <div class="col-xs-12">Hello</div>
    </div>
    <div class="row thin">
        <div class="col-xs-12">world</div>
    </div>
</div>


                
                    2023-02-13 12:09  回答
                       好开心6327



    
    
        今天，你开发时遇到什么问题呢？
        立即提问
    

    
        热门标签