0

嘿做了一些挖掘和谷歌搜索建议一些作弊以获得相同高度的两列。只是有点紧张，因为需要在不违反任何规则的情况下这样做。有没有一种方法可以使列彼此具有相同的高度，即主体和菜单列是相同的，无论其中有多少内容。

使用 XHTML strict1.0。

谢谢

达米安

4

3 回答 3

1

添加一些固定高度约。屏幕高度和溢出：为父 div 隐藏。为主 div 和侧边栏添加溢出：auto 和 height:100%。因此，当内容增长时，布局不会中断。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
body                    {   font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px;  }
.clear                  {   clear:both; }
.container              {   background:#eee; display:inline-block; height:300px; overflow:hidden; padding:10px; width:800px;  } 
.container p,           {   color:#003;  }
.main                   {   background:#fff; float: right; height:100%; overflow:auto; padding:0 15px; text-align:justify; width:470px;  }
.main h1                {   color:#930;  }
.sidebar                {   background:#000; float:left; height:100%; overflow:auto; width:280px;    } 
.sidebar ul li a        {   color:#fff; text-decoration:none;    }
</style>

</head>

<body>

<div class="container">
        <div class="sidebar">
            <ul>
                <li><a href="#">Link -1</a></li>
                <li><a href="#">Link -2</a></li>
                <li><a href="#">Link -3</a></li>
            </ul>
        </div>

        <div class="main">
            <h1> Lipsum dot com </h1>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

            <p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

            <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

            <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>


        </div>
        <br class="clear" />
</div>


</body>
</html>

我对页面的 CSS 做了一些更改，根据以下评论，您可以查看

<style type="text/css">
body                    {   font-family:Arial, Helvetica, sans-serif; font-size:12px; line-height:18px;  }
.clear                  {   clear:both; }
.container              {   background:#eee; display:block; overflow: hidden; position: relative; padding:10px !important; width:800px;  } 
.container p,           {   color:#003;  }
.main                   {   background:#fff; float: right; height:100%; overflow:auto; padding:0 15px; text-align:justify; width:470px;  }
.main h1                {   color:#930;  }
.sidebar                {   background:#000; float:left; height: 100%; left:10px;  position: absolute; width:280px; } 
.sidebar ul li a        {   color:#fff; text-decoration:none;    }
</style>
于 2012-08-29T14:41:14.140 回答
0

小提琴：http: //jsfiddle.net/uYknh/

<div id="cols">
    <div class="col col1">
        asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>asd<br/>
    </div>
    <div class="col col2">
        asd<br/>asd<br/>
    </div>
</div>

.cols{display:table-row;width:100%;}
.col{display:table-cell;width:230px;background-color:#eee;border:1px solid #555;}
于 2012-08-29T00:27:35.187 回答
0

HTML

<div id="main_body" class="custom_width"></div>
<div id="menu_column" class="custom_width"></div>

CSS

.custom_width {
    max-width: 400px;
}

相应地调整宽度。

于 2012-08-31T08:55:22.630 回答