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

You can use absolute positioning in your CSS (the ui-panel-inner sizes the jQM panel to the height of the page):

.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;
}

Here is your jsFiddle updated with the above CSS: http://jsfiddle.net/ezanker/7G8JK/13/

于 2013-10-22T17:36:31.010 回答
0

试试这个 .css - 对我有用。也许您必须调整一些 div 高度以完全适合您的网站。

您忘记了一些其他元素来继承您网站的基本高度

CSS：

.headerchat { height: 30px; background: #0000FF; color: white }
.bodychat { background: #333333; height:100%;}
.messagesdiv { width: 242px; height:100%; background: white }
.footerchat { background: #999999; }
#text { width: 100px;}
.containerchat, div[data-role="panel"], div[data-role="panel"] .ui-panel-inner {
   height:100%;
}

JSFIDDLE：

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

于 2013-10-21T07:28:37.190 回答