2

I've a...

<body> with <div id="prj_div">
<div id="prj_mainframe">&nbsp;</div>
<div id="prj_inputarea">
    <div id="prj_inputarea_left">
    </div>
    <div id="prj_inputarea_center">
    </div>
    <div id="prj_inputarea_right">
    </div>
</div>

and with 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%;
}

There is a text input in the prj_inputarea_left and center, with 12 letters of hypertext in right, FWIW.

Fiddle

If I set #prj_inputarea width to 97% instead of 100%, this works much better. There are two issues I'm trying to solve with this.

  1. Make the reziable prj_div accessible from behind prj_inputarea.
  2. The original goal was to have prj_inputarea_center shrink/grow to fill the available space.

Attempted solutions:
z-index, the result was overflow created a x-scroll with the resize on it. This kinda worked, but I'd like to do it w/o an x-scroll for 5px.
Javascript? This is working so well. I'd rather do without this feature if it means bringing a new technology into the fray.

Modeled after:
http://stevesanderson.github.io/fixed-height-layouts-demo/two-columns.html

4

1 回答 1

1

小提琴

发生了很多事情，并且进行了很多小的更改来使这项工作。最大的改变是将 prj_inputarea 放在远离边缘的地方，显然那里有一个控件，我们真的不想让文本覆盖它。完成后，只需将其他所有内容对齐即可，例如使 div 不相互接触。

<div id="prj_div">
    <div id="prj_mainframe">&nbsp;</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%;
}
于 2013-10-21T16:33:56.713 回答