4

タイトル バーとその下に 2 つの列があるページがあります。2 つの列は絶対配置されているため、背景色をページの下部まで拡張できます。制約は次のとおりです。

  • 左の列の右端が終わるところから右の列の左端を開始したい。
  • 左の列のテキストは、一部の ajax リクエストによって変わります。拡張する必要があるため、左の列に固定幅を使用できません。
  • 右の列の幅は問題ではありません。その高さは、少なくともページの下部まで垂直方向に 100% 満たす必要があります。コンテンツがページの下部に収まる場合は、背景も一緒に拡張する必要があります。

ユーザーがこのフロント ページにアクセスすると、3 つの列すべてがほぼページ全体を水平方向に占め、垂直方向にページ全体を占める必要があるため、「いっぱい」に見えるという考えです。下にスクロールすると、左の列が終了し、右の列が続きます。

私はjavascriptを使用してこれを達成しました。

$("#right").css('left', $("#left").width()+'px');

私はjavascriptを使いたくありません。CSS3 のみを使用して、これらの制約でこのページを作り直すことはできますか?

http://jsfiddle.net/m3ta/BJFME/2/

4

6 に答える 6

0

テーブルレイアウトを達成しようとしていると思います。これを試してくださいhttp://jsfiddle.net/MtBXf/

<div id = "top"></div>
<div id = "mid">
    <div id = "left">
            <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p>
        </div>
    <div id = "right">
        <p>And here goes the content for the right part</p>
    </div>
</div>



* { margin: 0; padding: 0 }
#top { height: 100px; background: orange }
#mid { display:table-row; top: 100px; bottom: 0; width: 100% }

#left, #right {
    display:table-cell;
    width: 50%;
    max-width: 50%;
}
#left {
    background: SkyBlue;
}
#right {
    background: YellowGreen;
}
于 2013-06-18T10:04:21.270 に答える
0

私があなたを正しく理解していれば、これがあなたの解決策です：

http://jsfiddle.net/BJFME/3/

#flexbox {      
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: start;
    -webkit-box-align: start;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: start;
    -moz-box-align: start;

    display: box;
    box-orient: horizontal;
    box-pack: start;
    box-align: start;

    overflow: hidden;
}
#flexbox .col {
    width: 27.333%;
    padding: 30px 3% 0;

    margin-bottom: -99999px;
    padding-bottom: 99999px;
}
#flexbox .col p {
    margin-bottom: 30px;
}
#flexbox .col:nth-child(1) {
    -moz-box-ordinal-group: 2;
    -webkit-box-ordinal-group: 2;
    box-ordinal-group: 2;
    background: #ccc;
}
#flexbox .col:nth-child(2) {
    -moz-box-ordinal-group: 1;
    -webkit-box-ordinal-group: 1;
    box-ordinal-group: 1;
    background: #eee;
}
#flexbox .col:nth-child(3) {
    -moz-box-ordinal-group: 3;
    -webkit-box-ordinal-group: 3;
    box-ordinal-group: 3;
    background: #eee;
}

このサイトからコードを取得しました：

http://css-tricks.com/fluid-width-equal-height-columns/

これには複数の解決策があります。

于 2013-06-12T20:08:34.617 に答える
0

おそらく、古い IE バージョンでも機能する次の css 2.1 ソリューション:

<div id = "top"></div>
<div id = "mid">
    <div id = "left">
        <p>Lorem Ipsum Somささsething</p>
        <p>Lorem Ipsum Something 23dsdsdsdsd</p>
         <div id = "right">
            dsdsdsdsd
        </div>
   </div>
</div>
* { margin: 0; padding: 0 }
#top { height: 100px; background: orange }
#mid { position: absolute; top: 100px; bottom: 0; width: 100% }

#left {
    position: absolute;
    background: SkyBlue;
    top: 0;
    bottom: 0;
}

#right {
    position: absolute;
    background: YellowGreen;
    top: 0;
    left: 100%;
    min-height: 100%;
}
于 2014-08-15T09:02:44.887 に答える
0

これを試して：

* { margin: 0; padding: 0 }
#top { height: 100px; background: orange }
#mid { position: absolute; top: 100px; bottom: 0; width: 100% }

#left {
    float:left;
    max-width: 50%;
    background: SkyBlue;
    height:100%;
    width: auto;
}

#right {
    position: absolute;
    background: YellowGreen;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    overflow: auto;
}

フィドル。

于 2013-06-12T18:26:39.400 に答える
0

「float」ヒントに基づいて、これが進むべき道です：

  1. 左の列を右の列要素の内側に配置し直します
  2. 右側の col 要素を 100% 幅に設定します
  3. 左の列を「float:left」に設定し、高さを 100% にします
  4. まだ「中間」ニレが必要かどうかを確認してください;）

CSS

#left {
    float:left;
    background: SkyBlue;
    height:100%;
}

#right {
    position: absolute;
    background: YellowGreen;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
}

HTML

<div id = "mid">
    <div id = "right">

        <div id = "left">
            <p>Lorem Ipsum Something</p>
            <p>Lorem Ipsum Something 23</p>
            <p>Lorem Ipsum Something 23 and much more text</p>
        </div>

        <p>And here goes the content for the right part</p>
    </div>
</div>

例については、このフォークされたフィドルを参照してくださいhttp://jsfiddle.net/UXGjt/

于 2013-06-12T17:59:20.533 に答える