我有一个...
<body> with <div id="prj_div">
<div id="prj_mainframe"> </div>
<div id="prj_inputarea">
<div id="prj_inputarea_left">
</div>
<div id="prj_inputarea_center">
</div>
<div id="prj_inputarea_right">
</div>
</div>
和 CSS...
#prj_div {
overflow: hidden;
resize: both;
min-width: 32.2em;
width: 32.2em;
min-height: 22ex;
padding: 0.375ex 0.1875em;
position: relative;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
#prj_chatframe {
resize: none;
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0px;
bottom: 3.75ex;
overflow-x: hidden;
overflow-y: scroll;
}
#prj_inputarea {
resize: none;
width: 100%;
position: absolute;
height: 3.75ex;
line-height: 3.75ex;
padding: 0 0.1em !important;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
margin: 0;
padding: 0;
text-align: left;
}
#prj_inputarea_left {
width: 7.25em;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 7.25em;
}
#prj_inputarea_center {
min-width: 27.25em;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 7.25em;
}
#prj_inputarea_right {
width: 3em;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
right: 0px;
}
#prj_id {
width: 7.25em;
}
#prj_text {
width: 75%;
}
prj_inputarea_left和中间有一个文本输入，右边有12个字母的超文本，FWIW。
如果我将#prj_inputarea 宽度设置为 97% 而不是 100%，效果会更好。我正试图解决两个问题。
- 使 reziable prj_div 可以从 prj_inputarea 后面访问。
- 最初的目标是让 prj_inputarea_center 收缩/增长以填充可用空间。
尝试的解决方案:
z-index，结果是溢出创建了一个 x-scroll 并调整了它的大小。这有点管用，但我想在没有 5 像素的 x 滚动的情况下进行。
Javascript？这工作得很好。如果这意味着将一项新技术带入战场，我宁愿没有这个功能。
仿照:
http://stevesanderson.github.io/fixed-height-layouts-demo/two-columns.html
最佳答案
为了完成这项工作，发生了很多事情，也进行了很多小的改动。最大的游戏规则改变是将 prj_inputarea 远离边缘，显然那里有一个控件，我们真的不想用文本覆盖它。完成后，只需将其他所有内容正确对齐即可，例如让 div 不相互接触。
<div id="prj_div">
<div id="prj_mainframe"> </div>
<div id="prj_inputarea">
<div id="prj_inputarea_left">
<input type="text" id="prj_id" title="Id" maxlength="16" value="Nickname">
</div>
<div id="prj_inputarea_center">
<input type="text" id="prj_text" title="Text" maxlength="1024">
</div>
<div id="prj_inputarea_right"><a id="prj_notifylink" href="javascript:void(0)">Notify</a> <a id="prj_adminlink" href="javascript:void(0)">Admin</a>
</div>
</div>
</div>
#prj_div {
overflow: hidden;
resize: both;
min-width: 32.2em;
width: 32.2em;
min-height: 22ex;
padding: 0.375ex 0.1875em;
position: relative;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
#prj_chatframe {
resize: none;
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0px;
bottom: 3.75ex;
overflow-x: hidden;
overflow-y: scroll;
}
#prj_inputarea {
resize: none;
position: absolute;
height: 3.75ex;
line-height: 3.75ex;
padding: 0 0.1em !important;
bottom: 0;
left: 0;
right: 0.5em;
overflow: hidden;
margin: 0;
padding: 0;
text-align: left;
}
#prj_inputarea_left {
width: 6.25em;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
right: 6.25em;
}
#prj_inputarea_center {
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
right: 5.75em;
left: 6.25em;
}
#prj_inputarea_right {
width: 5.25em;
position: absolute;
overflow: hidden;
top: 0;
bottom: 0;
right: 0px;
}
#prj_id {
width: 7.25em;
}
#prj_text {
width: 100%;
}
关于CSS:调整大小点击被盗，而是选择，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19453482/