0

HTML/CSS を介してサイズに関係なく、画面の高さ全体を使用することに関する投稿がたくさんあります。ただし、一般的には、ウェブページ全体をヘッダー/フッターと伸縮可能な中央でレイアウトしたい場合です。コンポーネント（ページ全体ではない）がこれを必要とする、私が取り組んでいる実際の例を投稿するのは良いことだと思いました。

チャット クライアントを JQuery Mobile パネルに組み込んでみようと思いました。ボタンを押すと、見栄えの良いパネルが右から飛び出し、そこにメッセージを入力し、送信ボタンを押して、パネルを閉じます。

これが JFiddle で、コードは以下のとおりです。

http://jsfiddle.net/7G8JK/9/

私は JQuery Mobile を初めて使用するので、そのパネルのスタイリングには多くの要望が残されています。しかし、あなたは私がそれで行くところに着きます。この時点での主な障害は、中央の白い領域 (チャット メッセージを表示するための領域) である "messagesdiv" クラスです。利用可能なすべての高さを埋めるためにストレッチしたい。本質的に、どのサイズもハードコーディングしたくありません (現在、その領域は、表示するためだけに 242x200 にハードコーディングされています)。これは可能ですか？もしそうなら、どのように？

HTML:

<!-- rightpanel3  -->
<div data-role="panel" id="rightpanel3" data-position="right" data-display="overlay" data-dismissible="true" data-theme="a">

    <div class="containerchat">
        <div class="headerchat">CHAT</div>
        <div class="bodychat">
            <div class="messagesdiv"></div>
        </div>
        <div class="footerchat" data-role="fieldcontain">                                
            <input type="text" id="text" name="name" value="" data-role="none">
            <input id="btnSendMsg" type="button" value="Send" data-corners="false" data-inline="true"/>
        </div>
    </div>

</div><!-- /rightpanel3 -->


<!--Rest of the page-->
<div data-role="header"></div>

<div data-role="content">
        <a href="#rightpanel3" data-role="button" data-inline="true" data-mini="true">Overlay</a>
</div>

<div data-role="footer"></div>

CSS:

    .headerchat { height: 30px; background: #0000FF; color: white }
    .bodychat { background: #333333; }
    .messagesdiv { width: 242px; height:200px; background: white }
    .footerchat { background: #999999; }
    #text {
        width: 100px;
    }
4

2 に答える 2

2

CSS で絶対配置を使用できます (ui-panel-inner は jQM パネルのサイズをページの高さに合わせます)。

.ui-panel .ui-panel-inner, containerchat {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
}
.headerchat {
    position: absolute;
    top: 15px;left: 15px;right: 15px; height: 30px;
    background: #0000FF; color: white;
}
.bodychat {
    position: absolute;
    top: 46px; bottom: 61px; left: 15px; right: 15px;
    background: #333333;
}
.messagesdiv {
    width: 242px;
    height:100%;
    background: white
}
.footerchat {
    position: absolute;
    bottom: 0px;left: 15px;right: 15px; height: 60px;
    background: #999999;
}
#text {
    width: 100px;
}

上記の CSS で更新された jsFiddle は次のとおりです: http://jsfiddle.net/ezanker/7G8JK/13/

于 2013-10-22T17:36:31.010 に答える