2013-11-25 3 views
0

У меня есть окно, размер которого можно изменить. Внутри: есть div, который должен изменить размер при изменении окна. Существует шкала ОК высотой любого содержания внутри, которое должно всегда отображаться внизу. Обратите внимание, что содержимое для этих 2 может быть изменено в любое время. Пожалуйста, не разрешайте JavaScript.Динамический размер окна с DIV, пропорциональный второму DIV

<html style=height:100%> 
<body style=height:100%;overflow:hidden> 
<div id=edit_area style=height:80%;overflow-y:auto>Unknown content and height</div> 
<div id=ok_bar style=height:100px>Unknown content and height</div> 
</body> 
</html> 

Несмотря на то, что некоторые говорят - стол был простым решением для этого перед html5>:

+0

Пожалуйста, не используйте встроенные стили это так бедны. –

ответ

1

Пожалуйста, как я сказал, не используйте встроенный стиль.

CSS Файл:

html{ 
    height:100%; 
} 

body{ 
    height:100%; 
    overflow:hidden; 
} 
div#edit_area{ 
    height:80%; 
    overflow-y:auto; 
} 
div#ok_bar{ 
    height:20%; 
    position:relative; 
    bottom:0px; 
} 

HTML:

<html> 
<body> 
<div id=edit_area>Unknown content and height</div> 
<div id=ok_bar>Unknown content and height</div> 
</body> 
</html> 
+0

Полностью не ответил на мой вопрос. –

+0

80% не будут поддерживать скрытый контакт с нижним div при изменении окна –

+0

см. Редактировать @JohnnyDarvall ps: ваш вопрос трудно понять –

0

Это работает с использованием таблицы:

<style>html,body{height:100%}</style> 
    <body style=padding:0;overflow:hidden> 
    <table style=width:100%;height:100%> 
    <tr><td style=padding:0> 
<div style='height:100%;overflow:auto;padding:20px' contentEditable></div> 
</td></tr> 
    <tr><td style=height:10px;padding:8px><input type=button value=OK></td></tr> 
    </table> 
    </body></html> 
Смежные вопросы