CSS:2 つの柱 (固定/流動) - 同じ高さ

StackOverflow https://stackoverflow.com/questions/1784841

  •  21-09-2019
  •  | 
  •  

質問

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

  • 左の列、固定幅、背景は黄色になります
  • メインカラム、画面の残りの部分

メイン列には不定の長さのテキストが含まれるため、内容に関係なく、左の列をメイン列と同じ高さにしたいと考えています。ヘッダーもフッターもなく、画面が 2 つに分割されているだけですが、左側が表示されます。 しなければならない メインが占めるスペースをすべて埋めます。JavaScriptはありません。

ありがとう。

編集：これ（非常に基本的なレイアウト）はできますか それなし 背景画像や不合理なマージン値などのトリックはありますか?私は軽蔑されているテーブルアプローチから前進しようとしていますが、これまでのところ、CSS のみのレイアウトでは、最も簡単なことを行う場合でも常に何らかの工夫が必要であることがわかりました。

役に立ちましたか？

解決 3

だから、基本的に「これはトリックなしで行うことができる」という質問への答えは：いいえ

。

他のヒント

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

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

このようにして、内側/メイン div は外側/サイドバー div を内側/メイン div と同じ高さにします。ただ float:right 内側/メイン div、外側/サイドバー 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;
}

ここ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>

希望あなたのためにこの作品ます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top