3

2列のWebページを作成しようとしています。両方の列の高さは動的ですが、両方ともページの100％拡張する必要があります。

私が言いたいのは、あなたがページを持っているかどうかです

+------------------------+
|  Header                |
+------------------------+
| Col1        |  Col2    |
|             |          |
|             |          |
|             |          |
+-------------+----------+
|    footer              |
+------------------------+

上記のように、両方の列でページの高さ全体を拡張したいと思います。

今私は持っています

<div id="main">
  <div id="col1"></div>
  <div id="col2"></div>
</div>

#col1 {float: left;}
#col2 {float: right;}

問題は、私が何をしようとしても、列の高さを大きくする唯一の方法は、静的な数値を使用することです。

#col2 {
  float: right;}
  height: 100px;
}

コンテンツは動的であるため、これは機能しません。

フロートを変えて、あちこちにクリアを入れてみましたが、何をしてもページはこんな感じになってしまいます

+------------------------+
|  Header                |
+------------------------+
| Col1        |  Col2    |
|             |          |
|             |          |
|             +----------+
|             |          |
|             |          |
|             |          |
+-------------+----------+
|    footer              |
+------------------------+

列2が列1より短い場合。

ページの高さを拡張する2つの列を並べて配置するにはどうすればよいですか？

編集

私はすべての提案を投げて、実を結ぶことなく試しました。何か追加したいです。フロートなしでこれを行うためのより良い方法があれば、私も喜んでいます。たとえば、相対位置。唯一の問題は、メインのdivを本体の中央に配置する必要があることです。これは、絶対者では機能しないようです。

4

6 に答える 6

2

私はあなたのための解決策を持っています。実例： http： //jsfiddle.net/Qbdab/

HTML：

<div id="header">
</div>
<div class="colmask doublepage">
    <div class="colleft">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>
<div id="footer">
</div>

CSS：

#header {
    background: lightgreen;
    clear:both;
    float:left;
    width:100%;
}
.colmask {
    clear:both;
    float:left;
    width:100%;            
    overflow:hidden;
}
.colleft {
    float:left;
    width:100%;
    position:relative;
}
.col1,.col2{
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}

.doublepage {
    background: lightblue;   /* right column background colour */
}
.doublepage .colleft {
    right:50%; /* right column width */
    background: salmon; /* left column background colour */
}
.doublepage .col1 {
    width:46%; /* left column content width (column width minus left and right padding) */
    left:52%; /* right column width plus left column left padding */
}
.doublepage .col2 {
    width:46%; /* right column content width (column width minus left and right padding) */
    left:56%; /* (right column width) plus (left column left and right padding) plus (right column left padding) */
}
#footer {
    background: pink;
    clear:both;
    float:left;
    width:100%;
}

私はこのhttp://matthewjamestaylor.com/blog/perfect-2-column-double-page.htmを使用して、基本にスリム化すると同時に、機能することを明確にするために色を付けました。

于 2011-07-17T19:16:50.610 に答える
0

編集：CSSだけを使用して、コンテンツコンテナを自動サイズ設定する方法はありません-コンテンツに基づいて高さが拡張されます-要素を絶対的に配置しない限り（不要です）。背景にコンテナを使用し、コンテンツに列をクリアすることを含むCSSの回避策があります。

body {
    margin:0;
    padding:0;
    border:0;
 }

.outerContainer {
    position:relative; 
    clear:both;
    float:left;
    width:100%;
    overflow:hidden;
    backround-color: RIGHT COLUMN COLOR;}

.innerContainer {
    position:relative;
    float:left;
    width:100%;
    right:50%; /* Offsets this by 50% - see explanation */
    background-color: LEFT COLUMN COLOR;}

.leftColumn {
    float:left;
    position:relative;
    left:50%;
    width:50%;
}

.rightColumn {
    float:left;
    position:relative;
    left:50%;
    width:50%;
 }

HTMLは構造化されます：

div class="outerContainer"
    div class="innerContainer"
       div class="leftColumn"  /div
       div class="rightColumn" /div
    /div
/div

仕組みは次のとおりです。

OuterContainerの背景はinnerContainersの背景で覆われます-これは左に50％オフセットします（右：50％と言います）-したがって、幅はouterContainerと同じですが、50％左に移動したinnerContainerはouterContainerの左半分を覆います。

列はコンテンツ用です。それらは外側のコンテナの内側にある内側のコンテナの内側にあるため（どちらかの列を伸ばすと両方のコンテナが下に押されます。したがって、どちらの列の内容が長くてもかまいません）、常に同じサイズで表示されます。

現状では、コードは外観のニーズ（パディング、マージンなど）に合わせて調整する必要があります。全体のサイズに合わせて右/左の列の幅を調整します（ただし、並べて配置するには、両方の合計が100％未満である必要があります）。innerContainersの「right」プロパティを調整して左右に移動し、列のサイズを効果的に変更します。

私はこれをここから抽象化しました。これは私が理解するのは困難でしたが、パディング/マージンなどを考慮して幅/左の位置を設定する必要がある方法についてのより正式な説明があります。

他の（より簡単な）解決策は、フェイクカラムを使用することです

于 2011-07-17T07:25:39.690 に答える
0

ページにさらに多くのdivタグがあるとします。例えば、

HTML:
<div id="wrapper">
  <div id="header">
     <!-- some code here -->
  </div><!-- end of header -->
  <div id="body">
     <div id="left">
        <!-- some code here -->
     </div>
     <div id="right">
        <!-- some code here -->
     </div>
     <div style="clear:both"></div>
  </div><!-- end of body -->
  <div id="footer">
     <!-- some code here -->
  </div>
</div><!-- end of wrapper -->

CSS:
#wrapper{
  background:#eee;
  width:970px;
  margin:0px auto;
}
#wrapper #body{
  height:auto;
}
#wrapper #body #left{
  widht:70%;
  float:left;
  border:1px solid black;
}
#wrapper #body #right{
  width:auto;
  float:right;
  border:1px solid black;
}

ネストされたdivがあると、親divから値を継承するようになります。

于 2011-07-17T08:38:41.157 に答える
0

html：各列にclass="col"を追加

#col1 {
    background:lightyellow;
    float:left;
}
#col2 {
    background:lightred;
    float:right;
}
.col {
    width:300px;
    min-height:300px;    /* viewport fillsize height */
    height:100%;    /* autofill wrapper height, intend to stetch the shorter shrinked floated bloock */
}
于 2011-07-17T08:49:36.003 に答える
0

divの後に次のコードを追加して、両方がクリアされるようにすることができます。

<br clear="all" />

<div id="main">
  <div id="col1"></div>
  <div id="col2"></div>
  <br clear="all" />
</div>

cssクラスを使用してクリアしたい場合は、これを行うことができます。

<br class="clear" />

br.clear {
     clear:both;
     height:0px;
     width:0px;
     margin:0;
     padding:0;
}
于 2011-07-17T08:55:32.487 に答える
0

http://jsfiddle.net/Xtw84/1/（これは別の質問の例として行われたため、構造とまったく同じではありませんが、残りの部分を理解できると確信しています。）

このようなものが非常に一般的に使用されます。実際には列を完全な高さにするのではなく、すべての列を背景を保持する外側の要素にラップすることで、列の錯覚を作成します。

編集：幻想はあなたがそれをhttp://jsfiddle.net/Xtw84/2/にするものです

私は何もせずに、この分割スタイルを含む画像に変更しました。

于 2011-07-17T14:01:26.763 に答える