Question

我有一个可以调整大小的窗口。内部：有一个div必须随着窗口的变化而改变大小。无论内部的内容必须始终出现在底部，都有一个高度正常的高度。请注意，这些2的内容可以随时更改。请不要使用JavaScript解决方案。

<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＆gt;之前，桌子是一个简单的解决方案：

Answer 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>

Answer 2

这使用表：

    <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>

动态窗口大小，DIV与第二个DIV成比例

2 个答案: