делаю прокрутку div с процентом

0

я пытаюсь создать вертикальную прокрутку div с процентом, так как я разрабатываю для разных высот устройств, однако, я работаю, когда я помещаю пиксели, но когда я помещаю процент, он не применяется

См. Пример:

<div data-role="content"  >
    <div id="divChat" > 
    <div style="text-align:center"><div Class="ChatDate">2013-07-07</div></div>
    <div class="admin">Goal! Man city 1- Chealse 1<br/><span class="Time">16:42</span>     </div>

            <div class="bubble you"><div class="youName">Omer</div>Here?<br/>  <span class="Time">16:42</span></div>
                  <div class="bubble me">yes<br/><span class="Time">16:42</span></div>
         <div class="bubble me">yes<br/><span class="Time">16:42</span></div>
         <div class="bubble me">yes<br/><span class="Time">16:42</span></div>
         <div class="bubble me">yes<br/><span class="Time">16:42</span></div>
         <div class="bubble me">yes<br/><span class="Time">16:42</span></div>
         <div class="bubble me">yes<br/><span class="Time">16:42</span></div>
                     <div style="text-align:center"><div Class="ChatDate">2013-07-07</div></div>
    <div class="admin">Goal! Man city 1- Chealse 1<br/><span class="Time">16:42</span></div>

            <div class="bubble you"><div class="youName">Omer </div>Here?<br/><span class="Time">16:42</span></div>
                  <div class="bubble me">yes<br/><span class="Time">16:42</span></div>
    </div>
 <div data-role="footer"  style="bottom:0; position:absolute; left:0; width:100%">
    <div class="ui-grid-a"  > 
      <div class="ui-block-a" style="width:70%; padding-left:2px; ">
        <div data-role="fieldcontain"style=" padding:0px " >


        <textarea  data-mini="true"  data-role="none" style="width:90%; height:33px" data-theme="d"  name="chat_message" id="chat_message"  placeholder="Insert message here"></textarea>           </div>
      </div>
      <div class="ui-block-b" style="width:30%">

      </div>
    </div>
    </div>

я хочу, чтобы "divChat" был в фиксированной высоте и прокручивался http://jsfiddle.net/vHLYj/?

Теги:
scroll

1 ответ

0

Вы можете добавить встроенный блок в свой #divChat вот так:

#divChat {
   margin-top:2px;
   overflow-y:scroll; 
   height:50%;
   display: inline-block;
}

Имейте в виду, что встроенный блок не поддерживается в старых браузерах, таких как IE7.

Проверьте совместимость на:

http://caniuse.com/inline-block

Ещё вопросы

Сообщество Overcoder
Наверх
Меню