HTML CSS 100％高度問題 - 一個JQuery Mobile面板示例

無論通過HTML/CSS的大小，使用屏幕的整個高度都有很多帖子。通常情況下，他們是有人希望他們的整個網頁用頁眉/頁腳和可拉伸的中間進行佈局的情況。我認爲，發佈一個我正在使用的真實世界示例是很好的，其中一個組件（而不是整個頁面）需要這個。HTML CSS 100％高度問題 - 一個JQuery Mobile面板示例

我想我會嘗試建立一個聊天客戶端到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; 
    }

來源

2013-10-21 Robert

您可以使用絕對定位在你的CSS（ui-panel-in NER尺寸的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; 
}

這裏是你的jsfiddle上述CSS更新：http://jsfiddle.net/ezanker/7G8JK/13/

來源

2013-10-22 17:36:31 ezanker

繁榮。優勝者。非常感謝。讓我有點煩惱。現在我所要做的就是修復我的蹩腳樣式:)只要學習這個jQuery Mobile，這應該很有趣。要在所有瀏覽器上查看是否一切正常。回來一點。將相應標記。 – Robert

試試這個的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-21 07:28:37 tronc

HTML CSS 100％高度問題 - 一個JQuery Mobile面板示例

回答

相關問題