Twitter Bootstrap 3 responsive full height grid

2019-05-11 00:07发布

站内问答 / HTML/CSS
537 3 4

First of all, sorry for my poor english :S. I want a responsive full height grid using bootstrap 3. My problem is the grid, I don't know how to set 100% height to container and the inside divs. Width is perfect but height :S.

I try with this CSS but it doesn't work:

html body .container-fluid{
min-height:100%;
height:100%;
}

.border3{
min-height:20%;
height:20%;
}

.border4{
min-height:20%;
height:20%;
}

.border5{
min-height:20%;
height:20%;
}

HTML+CSS: http://jsfiddle.net/z5dpu7od/1/

Maybe I can solve this problem with JavaScript. I can take the browser height and applied it to .container-fluid element but I want to try it with CSS only.

Thanks for your answer :).

3条回答
一纸荒年 Trace。
2楼-- · 2019-05-11 00:30

Break up your content into row groups that you can use to set the height for each grouping. Height in css only works if the element's ancestors all have a height set. So, in the demo, you can see that I grouped your elements into three primary row groups: menus (which I set to 80% of the window/viewport height), the navigation links (which is set to 5%) and the brand (which is set to 15%). Doing this, allows you to then give the elements within those row groups heights in percentages as well. For example, the menu group has five nested rows which you can give equal heights by setting them each to height: 20%.

Demo

CSS: 

html, body, .container-fluid {
    height:100%;
}
.menusrow {
    height: 80%;
}
.navrow {
    height: 5%;
}
.brandrow {
    height: 15%;
}
.menusrow .row {
    height: 20%;
}
.border1 {
    text-align: center;
    height: 100%;
}
.border2 {
    text-align: center;
    padding: 10px;
    background-color: red;
    border: 1px solid black;
    height: 100%;
}
.border3 {
    text-align: center;
    padding: 10px;
    background-color: green;
    border: 1px solid black;
    height: 100%;
}
.border4 {
    text-align: center;
    padding: 10px;
    background-color: orange;
    border: 1px solid black;
    height: 100%;
}
.border5 {
    text-align: center;
    padding: 10px;
    background-color: blue;
    border: 1px solid black;
    color: white;
    height: 100%;
}

HTML: 

<div class="container-fluid">
    <div class="row menusrow">
        <div class="col-xs-12 col-md-6 border1">
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 1</div>
                <div class="col-xs-4 col-md-4 border4">MENU 2</div>
                <div class="col-xs-4 col-md-4 border5">MENU 3</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 4</div>
                <div class="col-xs-4 col-md-4 border4">MENU 5</div>
                <div class="col-xs-4 col-md-4 border5">MENU 6</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 7</div>
                <div class="col-xs-4 col-md-4 border4">MENU 8</div>
                <div class="col-xs-4 col-md-4 border5">MENU 9</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 10</div>
                <div class="col-xs-4 col-md-4 border4">MENU 11</div>
                <div class="col-xs-4 col-md-4 border5">MENU 12</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 13</div>
                <div class="col-xs-4 col-md-4 border4">MENU 14</div>
                <div class="col-xs-4 col-md-4 border5">MENU 15</div>
            </div>
        </div>
    </div>
    <div class="row navrow">
        <div class="col-xs-12 col-md-12" style="text-align:right;">EVENTS | CONTACT | ABOUT</div>
    </div>
    <div class="row brandrow">
        <div class="col-xs-12  col-md-6 border2">
             <h1>portada</h1>
        </div>
    </div>
</div>
查看更多
0人赞 添加讨论(0) 举报
Ridiculous、
3楼-- · 2019-05-11 00:35

This can be solved with css, no need for javascript.

For 100% height you want to set the full hierarchy of containers to 100% height, from your innermost div, all the way to the <html> element.

To start with, your initial css should start with this:

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

Notice the comma between the elements, this is so that all of them have the height set to 100%. Instead of your version which only sets the .container-fluid to be 100% height.

查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
4楼-- · 2019-05-11 00:36

It's difficult to know what you are trying to achieve, but this is what I would do with the design. One thing I use frequently is a small script to make responsive equal heights JQuery Match Height, it's for responsive equal heights.

SCRIPT: http://brm.io/jquery-match-height/

**DEMO: http://jsbin.com/depoq/1/****

enter image description here

Then it's applied like this:

$(document).ready(function () {
    /* ----------  equal height columns   -------- */
    $('.inner').matchHeight();
}); // end document ready

Then you need to add the class .inner (in this example) in the correct places.

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12 col-md-6 border1">
          <div class="inner">
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 1</div>
                <div class="col-xs-4 col-md-4 border4">MENU 2</div>
                <div class="col-xs-4 col-md-4 border5">MENU 3</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 4</div>
                <div class="col-xs-4 col-md-4 border4">MENU 5</div>
                <div class="col-xs-4 col-md-4 border5">MENU 6</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 7</div>
                <div class="col-xs-4 col-md-4 border4">MENU 8</div>
                <div class="col-xs-4 col-md-4 border5">MENU 9</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 10</div>
                <div class="col-xs-4 col-md-4 border4">MENU 11</div>
                <div class="col-xs-4 col-md-4 border5">MENU 12</div>
            </div>
            <div class="row">
                <div class="col-xs-4 col-md-4 border3">MENU 13</div>
                <div class="col-xs-4 col-md-4 border4">MENU 14</div>
                <div class="col-xs-4 col-md-4 border5">MENU 15</div>
               </div><!-- inner -->
            </div>
            <div class="row">
                <div class="col-xs-12 col-md-12" style="text-align:right;">EVENTS | CONTACT | ABOUT</div>
            </div>
        </div>
        <div class="col-xs-12 col-md-6 border2 inner">
             <h1>portada</h1></div>
    </div>
</div>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)