2

この単純なことを行うための最良の方法は何ですか?

  • 左の列、固定幅、背景は黄色
  • メイン列、画面の残りの部分

メイン列には不定の長さのテキストが含まれます。コンテンツが何であれ、左の列をメインと同じ高さにしたいと思います。ヘッダーもフッターもありません。画面が 2 つに分割されているだけですが、左側はメインが占めるすべてのスペースを埋める必要があります。ジャバスクリプトなし。

ありがとう。

編集:これ(非常に基本的なレイアウト)は、背景画像やばかげたマージン値などのトリックなしで実行できますか? 私は軽蔑されたテーブルのアプローチから移行しようとしていますが、これまでのところ、CSS のみのレイアウトでは、最も簡単なことを行うためにさえ、常にいくつかのトリックが必要であることがわかりました。

4

4 に答える 4

1

私は通常2つのdivを持っています。外側のdivには、メイン列と同じ高さにしたいサイドバーのコンテンツが含まれ、内側のdivはメイン列になります。

-----------------------------
|      -------------------- |
|      |                  | |
|      |                  | |
|      |                  | |
|      -------------------- |
-----------------------------

このように、inner / main divは、outer /sidebardivをinner/mainと同じ高さにします。内側/メインdivだけfloat:rightで、外側/サイドバーdivをに設定しwidth:100%、サイドバーを許可するために、内側/メインdivに左マージンがあることを指定しますmargin-left:20%

<div class="outer">
  <div class="inner">
    --main content--
  </div>
  --sidebar content--
</div>

更新: 申し訳ありませんが、サイドバーのコンテンツが間違った場所に表示されていました。浮いたときに内側/メインdivが右側に表示されるように、内側/メインdivのに配置する必要があります。CSSの例:

div.outer {
  width: 100%;
}

div.inner {
  margin-left: 20%; /* width of sidebar */
  float: right;
}
于 2009-11-23T18:08:54.810 に答える
1

したがって、基本的に「これはトリックなしで実行できますか」という質問に対する答えは、「いいえ」です。

于 2009-12-04T11:48:36.437 に答える
0

これがQUICKモックアップです。メインの列は、使用するにつれて水平方向に塗りつぶされます。左側の列の幅がすでにわかっている場合は、メインの列の幅を設定できます。

<html>
<head>
<style>
#leftCol
{
width:350px;
height:100%;
float:left;
background-color:#FFFF33;
}
#mainCol
{
width:53%;
height:100%;
float:left;
background-color:#CC0033;
}
#wrapper
{
width:100%;
}
.clearFix
{
clear:both;
}
</style>
</head>

<body>
<div id="wrapper">
<div id="leftCol">tfgsrrtgrt

</div>
<div id="mainCol">gtrgdrtgthdyhtyhtyhydthtr

</div>
<div class="clearFix"></div>
</div>
</body>
</html>

これがあなたのために働くことを願っています。

于 2009-11-23T20:23:40.497 に答える