2列100％使用HTML的高度

我在绝望中试图画出这个简单的东西。两列垂直伸展100％。这有可能吗？2列100％使用HTML的高度

这里有两个尝试

<html> 
<head> 
<title>Columns</title> 
</head> 
<body> 
<style type="text/css"> 
.wrapper {font-size:900px; 
width:1200px; 
margin:0 auto; 
} 
.col1 { 
width:600px; 
height:100%; 
float:left; 
background:#f00; 
} 
.col2 { 
width:600px; 
height:100%; 
float:left; 
background:#00f; 
} 
</style> 
<div class="wrapper"> 
<div class="col1"> C o l u m n 1 </div> 
<div class="col2"> C ol u m n 2 </div> 
</div> 
</body> 
</html>

和

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB"> 
<head> 
    <title>2 Column CSS Demo - Equal Height Columns with Cross-Browser CSS</title> 

    <style media="screen" type="text/css"> 
/* <!-- */ 
*{ 
    margin:0; 
    padding:0; 
} 

    html { 
    background-color: #ccc; 
     height: 100%; 
    } 
    body { 
    background-color: white; 
    width: 600px; 
    margin: 0 auto; 
height:100%; 
    position: relative; 
    border-left: 1px solid #888; 
    border-right: 2px solid black; 
    } 

#footer { 
    clear:both; 
    width:100%; 
    height:0px;font-size:0px; 
} 


#container2 { 


    clear:left; 
    float:left; 
    width:600px; 
     overflow:hidden; 
    background:#ffa7a7; 
} 



#container1 { 

    float:left; 
    width:600px; 
    position:relative; 
    right:200px; 
    background:#fff689; 
} 
#col1 { 
    float:left; 
    width:400px; 
    position:relative; 
    left:200px; 
     overflow:hidden; 
} 
#col2 { 
    float:left; 
    width:200px; 
    position:relative; 
    left:200px; 
     overflow:hidden; 
} 
/* --> */ 
    </style> 
</head> 
<body> 

<div id="container2"> 
    <div id="container1"> 
     <div id="col1"> 
      aaaa a a a a a a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a a a a aa a a a a aa aa a a a a a a a a aa aa a a a a a a a a aa aa a a a a aa a a a a aa aa a 
     </div> 
     <div id="col2"> 

      fghdfghsfgddn fghdfghsfgddn fghdfghsfgddn fghdfghsfgddn fghdfghsfgddn fghdfghsfgddn fghdfghsfgddn v 
     </div> 
    </div> 
</div> 
<div id="footer"> 
    &nbsp; 
</div> 
</body>

一个更

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html> 
<head> 

<title>Test Layout</title> 
<meta http-equiv="content-type" 
content="text/html;charset=utf-8" /> 
<meta http-equiv="Content-Style-Type" content="text/css" /> 

<style type="text/css"> 
/*primary positional elements */ 
html, body{ height:100%; font-family:Arial, Helvetica, sans-serif;} 
body {margin:0; padding:0; background:url(../images/top_grid.gif) repeat-x top right; font-size:small; } 

#wrapper{position:absolute; margin:0;left:50%;margin-left:-499px; height:100%; min-height:100%; width:998px;} 
html>body #wrapper{height:auto;} /*for mozilla as IE treats height as min-height anyway*/ 

#header{ position:absolute; margin:0; left:50%; margin-left:-499px;width:1000px;height:140px; background:url(../images/header.gif); background-color:#00FF66;z-index:99;} 
#header a{display:block; position:absolute; top:40px; left:20px; height:80px; width:400px;} 
#header a span{display:none;} 

#main{ position:absolute; margin:0;left:50%;margin-left:-499px; height:100%; min-height:100%;width:1000px;padding:0;background:url(../images/background.gif) no-repeat top left yellow; z-index:1; border-left:1px solid #82A4E1; border-right:1px solid #82A4E1;} 
html>body #main{height:auto; width:998px;} /*for mozilla as IE treats height as min-height anyway and to fix IE box model error*/ 

#left_col, #right_col{ position:absolute; margin:0; top:0; padding:0; height:100%; width:212px;border-left:1px solid #82A4E1; border-right:1px solid #82A4E1; z-index:3; background:url(../images/left_side_gradient.gif) repeat-x bottom right #ACB5E7; 
} 

#left_col{ left:20px;} 
#right_col{ right:20px } 
/*IE box model fix */ 
html>body #right_col{ width:210px; } 
html>body #left_col{ width:210px; } 
#left_col #menu{margin-top:195px;} 

.col_top{ position:absolute; top:140px; left:-1px;background-image:url(../images/column_tops.gif);height:45px; width:212px;} 
.clear_header{ height:155px; } 
.menu_clear{ height:195px; } 

#content{ padding:0 250px; height:100%; z-index:2; } 

/* Announcments section */ 
#announcements{ text-align:right; } 
#announcements ul{list-style-type:none; padding:0; margin:0;} 
#announcements li{ padding:5px 15px 5px 15px;} 
#announcements li a{ color:#1B3AA9;} 
#announcements li a:hover{font-weight:bold; padding-left:-13px;} 
#announcements h1{ font-size:18px; margin:0; padding:5px 15px 0 15px;} 

.date{ display:block; font-weight:bolder;} 
.column_img img{ border-bottom:1px solid white; border-top:1px solid white; } 
#content h1{margin:.25em 0;} 
#content p{margin:0 0 1em 0;} 

/* nav block elements */ 
#nav {} 
#nav, #nav ul { margin: 0; padding: 0; list-style: none; } 
#nav ul { border-bottom:1px solid #fff; border-top:1px solid #737AD7} 
#nav { margin-bottom: 1em; } 
#nav li { display: inline; padding: 0; margin: 0; } 

#nav li span { 
display: block; 
padding: 6px 10px; 
font-weight: bold; 
color: #666; 
} 

#nav li span#configParent, #nav li span #configuration { 
display: inline; 
font-weight: normal; 
padding: 0; 
} 

#nav li a { 
display: block; 
padding: 8px 10px; 
text-decoration: none; 
border-bottom: 1px solid #737AD7; 
border-top: 1px solid #fff; 
font-weight:bold; 
color:#1B3AA9; 
} 

#nav li a:hover { 
background: #EBF1FF; 
color:black; 
} 

#nav li li a { 
padding: 3px 8px 3px 20px; 
border:0; 

} 

#nav li ul{ 
border-bottom: 1px solid #737AD7; 
border-top: 1px solid #fff; 
} 

#nav li li li a { 
padding: 2px 8px 2px 40px; 
border:0; 
font-weight:normal; 

font-size:90%; 
} 

#nav li li ul{ 
background:0; 
border:0; 
} 

#nav .selected{ 
text-decoration:none; 
background-color: #E0E2F7; 
} 
#nav .selected:hover { 
text-decoration:underline; 
} 

#nav li li .selected{ 
text-decoration:underline; 
background:0; 
} 
</style></head> 

<body> 
<div id="main"> 
<div id="left_col"> 
<div class="menu_clear"></div> 

<div class="col_top"></div> 
<div id="nav"> 
<ul> 
<li><a href="">Menu Item 1</a></li> 
<li><a href="">Menu Item 2</a></li> 
<li><a href="">Menu Item 2</a></li> 
<li><a href="">Menu Item 2</a></li> 
<li><a class="selected" href="">Active Item</a> 
<ul> 
<li><a href="">Submenu Item</a></li> 
<li><a class="selected" href="">Active Item</a> 

<ul> 
<li><a href="">Menu Item 1</a></li> 
<li><a href="">Menu Item 2</a></li> 
<li><a href="">Menu Item 2</a></li> 
<li><a href="">Menu Item 2</a></li> 
</ul></li> 
<li><a href="">Submenu Item 2</a></li> 
</ul> 
</li> 
<li><a href="">Menu Item 3</a></li> 
</ul> 

</div> 
</div> 

<div id="right_col"> 
<div class="menu_clear"></div> 
<div class="col_top"></div> 
<div class="column_img"> 
<img src="images/pictures/students.jpg" alt="Students working" /> 
</div> 
<div id="announcements"> 
<h1>Announcements</h1> 
<ul> 
<li><span class="date">Jan. 31 2005</span><a href="">Nam liber tempor cum </a></li> 
<li><span class="date">Jan. 31 2005</span><a href="">Workshop Announcement</a></li> 

<li><span class="date">Jan. 31 2005</span><a href="">soluta nobis eleifend option congue nihil imperdiet</a></li> 
<li><span class="date">Jan. 31 2005</span><a href=""> doming id quod mazim placerat facer possim assum</a></li> 
<li><span class="date">Jan. 31 2005</span><a href=""> doming id quod mazim placerat facer possim assum</a></li> 
</ul> 
</div> 
</div> 

<div id="content"> 
<div class="clear_header"></div> 

<h1>Welcome to the New Website</h1> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p> 

</div> 
</div> 
<div id="header"><a href="http://www.#*$!xxxxxxx.org/"><span>Home</span></a></div> 
</body></html>

当含量太大，以适应浏览器的第三个不工作窗口。尝试使窗口变小并向下滚动

来源

2010-05-19 user345161

您正在寻找的是所谓的“Holy Grail”列布局。例如，Matthew James Taylor已经开发出一套强大的套件，其中包括 The Perfect 'Double Page' 2 Column Liquid Layout (Percentage widths)，它应该（可能会进行一些调整）满足您的要求。

来源

2010-05-19 18:35:12 jball

+1适用于亚光布局，它们非常棒 – 2010-05-19 18:36:55

我是一个平衡的倡导者。在有意义的时候使用表格就可以了，就像在这种情况下一样。如果必须严格构建div，使用div的意义何在？

知道什么时候握住他们，知道什么时候折起他们。

来源

2010-05-19 18:53:44 sepulturkey

其中之一，不表示表格数据的表格会为屏幕阅读器带来麻烦。 – jball 2010-05-19 19:00:32

对于纯HTML和带div的CSS这个问题，没有100％的解决方案，所以你必须妥协。你有两个选择：

a）如果内容将长于窗口的高度，你可以使用这个模板

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Two cols fit to the highest content height</title> 
    <meta charset="utf-8" /> 
    <style> 
     html,body{ 
     margin: 0; 
     padding: 0; 
     } 
     #wrapper, #footer{ 
     margin: 0px auto; 
     width: 960px; 
     border: 1px solid red; 
     } 
     #col1, #col2{ 
     display: table-cell; 
     vertical-align: top; 
     width: 10px; 
     min-height: 100%; 
     height: 100%; 
     } 
     #col1{border: 1px solid green;} 
     #col2{border: 1px solid blue;} 
     #footer{ 
     height: 30px; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="wrapper"> 
     <div id="col1">a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a </div> 
     <div id="col2">asdf asdf asdf<br/>adsf adsf adsf asdfadf<br/>adsf daf adsf aasdfasd </div> 
    </div> 
    <div id="footer"> 
     I'm the footer 
    </div> 
    </body> 
</html>

b）如果窗口将高于你的专栏，你可以使用这个一个

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>2 Column CSS Demo - Equal Height Columns with Cross-Browser CSS</title> 
    <style media="screen" type="text/css"> 
     *{ 
     margin:0; 
     padding:0; 
     } 

     html { 
     height: 100%; 
     } 

     body { 
     background-color: white; 
     width: 405px; 
     height: 100%; 
     margin: 0 auto; 
     border-left: 1px solid #888; 
     border-right: 2px solid black; 
     } 

     #wrapper { 
     width:100%; 
     min-height: 100%; 
     height: 100%; 
     background:#fff689; 
     } 

     #col1, #col2 { 
     display: inline-block; 
     vertical-align: top; 
     width: 200px; 
     min-height: 100%; 
     height: 100%; 
     } 

     #col1 { 
     background:#00f; 
     } 

     #col2 { 
     background:#f00; 
     } 

     #footer { 
     position: relative; 
     top: -30px; 
     height: 0px; 
     } 

     #footer div { 
     height: 30px; 
     background: #0f0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="wrapper"> 
     <div id="col1"> 
     I'm the column #1 
     </div> 
     <div id="col2"> 
     I'm the column #2 
     </div> 
    </div> 
    <div id="footer"> 
     <div>I'm the footer</div> 
    </div> 
    </body> 
</html>

你也可以用JavaScript解决问题。在这种情况下，只需取较高列的高度并为较低值设置相同的值。

来源

2013-03-22 23:59:51 MadYoga

2列100％使用HTML的高度

回答

相关问题