2

私は...

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

そして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 の幅を 100% ではなく 97% に設定すると、はるかにうまく機能します。これで解決しようとしている問題が 2 つあります。

  1. reziable prj_div を prj_inputarea の背後からアクセスできるようにします。
  2. 元の目標は、使用可能なスペースを埋めるために prj_inputarea_center を縮小/拡大させることでした。

試行された解決策：
z-index、結果はオーバーフローで、サイズ変更されたxスクロールが作成されました。これはちょっとうまくいきましたが、5px の x スクロールなしでやりたいと思います。
ジャバスクリプト？これはとてもうまくいっています。それが新しいテクノロジーを争いに持ち込むことを意味するのであれば、私はむしろこの機能なしでやりたいと思います.

モデル:
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 に答える