Bootstrap 中如何写含有4个列,每个列都与屏幕等高的页面?

Harry_416000

发布于
2015-05-15

Bootstrap 中如何写含有4个列,每个列都与屏幕等高的页面?

具体的 html 与 css 该怎么写呢?

如图

图片描述

阅读 3.2k

2 个回答

发布于
2015-05-15

更新于
2015-05-15

✓ 已被采纳

试试这样呢~

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>html5</title>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
    body,html,.row,.container-fluid{
        height: 100%;
    }
    .one{
        background-color: #452;
        height: 100%;
    }
    .two{
        background-color: #956;
        height: 100%;
    }
    .three{
        background-color: #034;
        height: 100%;
    }
    .four{
        background-color: #904;
        height: 100%;
    }

    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 one">
                1
            </div>  
            <div class="col-sm-3 two">
                2
            </div>              
            <div class="col-sm-3 three">
                3
            </div>              
            <div class="col-sm-3 four">
                4
            </div>      
        </div>                      
    </div>
</body>
</html>

发布于
2015-05-15

更新于
2015-05-15

实现的办法很多，例如使用css3中新的长度单位：vw和vh

vw：相对于视窗的宽度，视窗宽度是100vw
vh：相对于视窗的高度，视窗高度是100vh

因此，4列，与窗口等高，每列的宽为25vw，高为100vh
使用 vw 与 vh 的 DEMO

当然，你也可以使用flexbox来实现
使用flexbox的DEMO

查看全部 2 个回答

相似问题

找不到问题？创建新问题