Question

嘿做了一些挖掘和谷歌搜索建议一些作弊得到两个相同的高度列。在不弯曲任何规则的情况下需要这样做有点紧张。有没有办法可以使列与彼此相同的高度，即主体和菜单列相同，无论两者中有多少内容。

使用XHTML strict1.0。

由于

达明

Answer 1

添加一些固定高度约。屏幕高度和溢出：隐藏为父div。添加溢出：自动和高度：主要div和100％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>

Answer 2

小提琴：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;}

Answer 3

<强> HTML

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

<强> CSS

.custom_width {
    max-width: 400px;
}

相应地调整宽度。

两列CSS布局，菜单侧栏的高度与主要内容相同？

3 个答案: