How to have multiple columns that consume 100% height using twitter bootstrap?

前端未结

关注

 5  440

I have seen a number of similar questions, but have not found an answer for what I am looking for. Further information is as follows:

I am using twitter bootst

相关标签:

5条回答

故里飘歌

2020-12-09 21:18

Hey i think you want this

Css

.wraper, .header, .footer{
width:80%;
    margin:0 auto;
    overflow:hidden;
    border:solid 2px red;
}
.header{
    height:100px;
    background:green;
    border-color:darkred;
}
.sidebar{
width:20%;
    background:yellow;
    float:left;
}
.content{
width:70%;
    background:pink;
    float:right;
}
.footer{
    height:100px;
    background:blue;
    border-color:black;
}
#container2 {
background: none repeat scroll 0 0 #FFA7A7;
clear: left;
float: left;
overflow: hidden;
width: 100%;
}
#container1 {
background: none repeat scroll 0 0 #FFF689;
float: left;
position: relative;
right: 75%;
width: 100%;
}
#sidebar {
float: left;
left:76%;
overflow: hidden;
position: relative;
width: 20%;
text-align: justify;
}
#content {
    float: left;
    left: 81%;
    overflow: hidden;
    position: relative;
    text-align: justify;
    width: 72%;
}

** HTML

    <div class="header">header bar </div>
    <div class="wraper">
        <div id="container2">
    <div id="container1">
        <div id="sidebar">
            This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text
        </div>
        <div id="content">
           This is dummy text here This is dummy text here This is dummy
        </div>
    </div>
</div>
    </div>
        <div class="footer">Footer bar</div>

Live demo http://jsfiddle.net/rohitazad/Pgy75/2/

more about this click here http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

0 讨论(0)

梦如初夏

2020-12-09 21:30

You can try with display:table; to Parent Div and display:table-cell; to Child Div for achieving your results....

see the code :-

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  .container {
    background:red;
    width:600px;
    display:table;
  }

  .left {
    background:yellow;
    width:200px;
    display:table-cell;

  }


    .mid {
    background:blue;
    width:400px;
    display:table-cell;


  }

      .right {
    background:green;
    width:200px;
    display:table-cell;

  }



</style>
</head>
<body>
  <div class="container">
    <div class="left">shailender</div>
      <div class="mid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
        fff</div>
      <div class="right">afdafaf</div>


  </div>
</body>
</html>

Demo:- http://jsbin.com/ebucoz/13/edit

Read More About Fluid Width Equal Height Columns with Examples

0 讨论(0)

无人共我

2020-12-09 21:32

I think this might be, what you are looking for: two column layout ^source.

The main idea is to set height: 100% on both <body> and <html> and then make sure that the container also takes up all the height (via min-height: 100%). You might notice that code also contains workaround for IE6, because it was originally written, when fighting IE6 was just another day of work.

This was made by modifying a bit more complicated and more often used holy grail layout ^source.

0 讨论(0)
发布评论:

提交评论
- 加载中...

南笙

2020-12-09 21:36

The only real answer:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

<table border="1" height="100%" width="100%">
    <tr>
        <td width="10%">
            left
        </td>
        <td>
            right
        </td>
    </tr>
</table>

0 讨论(0)

星月不相逢

2020-12-09 21:42

Via css it may be possible but need some tricks.

You need to make both divs/columns very very tall by adding a padding-bottom: 1000px and then "trick the browser" into thinking they aren't that tall using margin-bottom: -1000px. It is better explained via example below.

http://jsfiddle.net/mediasoftpro/Ee7RS/

Hope this will be ok.

0 讨论(0)
发布评论:

提交评论
- 加载中...