3

I am trying to create a two div's side by side that fill my screen 100%. The left div contains some menu and the right the content. Here's the code I have at the moment: http://jsfiddle.net/HpWZW/ . The current problem is the height is only as large as my smallest div's content. So in this case my iframe in the right column is larger than my menu items in the left column; however, the height is limited to the left divs contents not the right. Any ideas? Thanks!

Code

<div>
    <div class="table">
        <div class="innerLeft">
            <span>Left Column</Span>
        </div>

        <div class="innerRight">
            <span>Content with Iframe</span>
        </div>
    </table>
</div>​

...

html, body {height: 100%}

.table {

    display: table;
    height: 100%;

}

.innerLeft {

    display: table-cell;
    min-width: 160px;    

    background-color: lightblue;
    color: black;
}

.innerRight {

    display: table-cell;
    width: 100%;
    vertical-align: top;

    background-color: red;
    color: white;
}

​</p>

4

4 回答 4

6

I have ran in the same problem so many times, until I found this: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

It is a valid CSS solution for making your colums share the height. Then both will be the height of the largest column.

If you want to make your colums fill the whole screen you could use something like

.innerLeft {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 50%; 
}

.innerRight {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    right: 0; 
}
于 2012-12-05T15:00:35.283 回答
1

Note that this is css3 and wont work for old browsers.

css3

<style>
html, body{height:100%;padding:0;margin:0;}
        div.table, div.table *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
         div.table{width:100%;height:100%;}
          div.table div{border:1px solid black;width:50%;height:100%;float:left;}
</style>

html:

<div class="table">
    <div class="innerLeft">
        <span>Left Column</Span>
    </div>

    <div class="innerRight">
        <span>Content with Iframe</span>
    </div>
</table>

Page:

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                height:100%;
                padding:0;
                margin:0;
            }
            div.table, div.table * {
                box-sizing:border-box;
                -moz-box-sizing:border-box;
                -webkit-box-sizing:border-box;
            }
            div.table {
                width:100%;
                height:100%;
            }
            div.table div {
                border:1px solid black;
                width:50%;
                height:100%;
                float:left;
            }
        </style>
    </head>
    <body>
        <div class="table">
            <div class="innerLeft"> <span>Left Column</span>

            </div>
            <div class="innerRight"> <span>Content with Iframe</span>

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

The above code would create two columns whenever you would like to fill the whole screen or a section.

The following code could be used to only fill the whole screen (containers behaves odd when using position absolute, there is workarounds though):

<!DOCTYPE html>
<html>

    <head>
        <style>
            html, body {
                height:100%;
                padding:0;
                margin:0;
            }
            #left {
                width:50%;
                height:100%;
                position:absolute;
                top:0;
                left:0;
                background:red;
            }
            #right {
                width:50%;
                height:100%;
                position:absolute;
                top:0;
                right:0;
                background:blue;
            }
        </style>
    </head>

    <body>
        <div id="left"></div>
        <div id="right"></div>
    </body>

</html>
于 2012-12-05T15:01:52.633 回答
-1

Shortest answear is to use proper table, min-height can also help you, but not all browsers respect it.

于 2012-12-05T14:57:24.780 回答
-1

Does this work for what your wanting?:

http://jsfiddle.net/Sgfnm/

<div>
    <div class="table">
        <div class="innerLeft">
            <span>Left Column</Span>
        </div>

        <div class="innerRight">
            <span>Content with Iframe</span>
        </div>
    </div>
</div>


.table {

    display: block;

}

.innerLeft {

    display: block;
    width: 160px;    

    background-color: lightblue;
    color: black;
    float:left;
}

.innerRight {

    display: block;
    width: 100%;
    vertical-align: top;

    background-color: red;
    color: white;
}
于 2012-12-05T15:07:44.363 回答