0

少し掘り下げてみると、Google検索で、同じ高さの2つの列を取得するためのいくつかのチートが提案されています。ルールを曲げずにこれを行う必要があるため、少し緊張しています。列を互いに同じ高さにする方法はありますか。つまり、どちらのコンテンツの量に関係なく、本体とメニュー列が同じになります。

XHTML strict1.0 を使用。

ありがとう

ダミアン

4

3 に答える 3

1

固定高さ約を追加します。画面の高さとオーバーフロー: 親 div では非表示。メインの div とサイドバーに、overflow : 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

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 に答える
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 に答える