HTML CSS 100-процентная проблема высоты - пример панели JQuery Mobile

Question

HTML CSS 100-процентная проблема высоты - пример панели JQuery Mobile

0

Есть тонны сообщений об использовании полной высоты экрана независимо от размера через HTML/CSS. Обычно, однако, это случаи, когда кто-то хочет, чтобы вся их веб-страница была компоновкой с верхним/нижним колонтитулом и растяжимой средой. Я подумал, что было бы неплохо опубликовать пример реального мира, с которым я работаю, в котором этот компонент (а не полная страница) нуждается в этом.

Я думал, что попытаюсь создать клиент чата на панели JQuery Mobile. Таким образом, вы нажмете кнопку, с правой стороны вы увидите красивую панель, в которую вы вводите сообщение, нажмите кнопку отправки и закройте панель.

Здесь JFiddle и код ниже:

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

Я новичок в JQuery Mobile, поэтому стилизация этой панели оставляет желать лучшего. Но вы добираетесь туда, куда я иду. Главным препятствием на данный момент является то, что белая область посередине - область, предназначенная для отображения сообщений чата - class "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;
    }

Robert 21 окт. 2013, в 03:53

Источник

Теги:

html

css

responsive-design

jquery-mobile

height

2 ответа

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/

tronc 21 окт. 2013, в 06:12

Ещё вопросы

ezanker · Accepted Answer · 2013-10-22T15-28-00.000Z

Вы можете использовать абсолютное позиционирование в своем CSS (внутренняя панель ui-panel - панель 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/

Boom. Победитель. Большое спасибо. Я был немного раздражен. Теперь все, что мне нужно сделать, это исправить мой дерьмовый стиль :) Просто изучаю этот jQuery Mobile, так что это должно быть весело. Собираюсь проверить это во всех браузерах, чтобы увидеть, все ли хорошо. Вернемся немного. Отметим соответственно.