【求助】页面求助文本框相对固定_html/css

回复讨论(解决方案)

首页

web前端

html教程

【求助】页面求助文本框相对固定_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:25 PM

现在有一个文本框和一个table 在同一个

（这是个弹出窗口，点击后弹出该DIV）
由于table内很多行所以导致弹出的窗口有垂直滚动条，当滚动条滚动时文本框也会随之滚动
希望可以做到只有table数据随之滚动，文本框在最上面固定需要怎么做呢？

回复讨论(解决方案)

position:fixed
?

position:fixed
? 不太对，这个属性是对于整个页面固定的而我要的是一个div里的另一个DIV 针对外层DIV固定

<div style="overflow:hidden;">     <div region="north">input放在这里</div>     <div region="center" style="overflow-y: auto;">table放在这里</div></div>

登录后复制

外面那层div加个split="true"

<div split="true" style="overflow:hidden;">            <div region="north">input放在这里</div>            <div region="center" style="overflow-y: auto;">table放在这里</div> </div>

登录后复制

外面那层div加个split="true"

<div split="true" style="overflow:hidden;">            <div region="north">input放在这里</div>            <div region="center" style="overflow-y: auto;">table放在这里</div> </div>

登录后复制

现在是这样一个结构 ^^^

div table 相关都在JSP里面很多页面都用到了搜索框即 text文本框所以这个是写在JS里面的

现在想的是只改这里让文本框相对于DIV固定在最上面就是看table中的行翻滚但是文本框一直在div最上面即可可以实现么

外面那层div加个split="true"

<div split="true" style="overflow:hidden;">            <div region="north">input放在这里</div>            <div region="center" style="overflow-y: auto;">table放在这里</div> </div>

登录后复制

.
现在是这样

只修改 div 小和 input 可以实现我说的text 在div大最上面固定么

你不想改变现有结构可以参考这个（不过真没有我那个方法方便）：http://blog.sina.com.cn/s/blog_62f573ad01013ntd.html

你不想改变现有结构可以参考这个（不过真没有我那个方法方便）：http://blog.sina.com.cn/s/blog_62f573ad01013ntd.html
虽然没有解决我的问题依然谢谢你~~~

还有人有高见么坐等

外面那层div加个split="true"

<div split="true" style="overflow:hidden;">            <div region="north">input放在这里</div>            <div region="center" style="overflow-y: auto;">table放在这里</div> </div>

登录后复制

我试过了不对~~~~~~~~~

我的是好的，效果图如下：

我的是好的，效果图如下：

嗯你的图跟我需求差不多方便共享下源码么

我的是好的，效果图如下：

我用你的为什么显示出来就没有下拉条了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /></head><body>     <div region="west" split="true"  title="毒品列表" style=" width:180px; height:400px; overflow:hidden; border:true">        <div region="north" style="height:80px;border:true" >            <table width="100%" cellspacing="0" cellpadding="6">                <tr>                    <td>                        <input type="text" id="name" style="border: 1px solid #8DB2E3;width: 121px; height: 18px" />                    </td>                </tr>                <tr>                    <td style="text-align:right">                        <input type="radio" id="ch" name="language" value="1" />中文                         <input type="radio" id="en" name="language" value="0" />英文                    </td>                </tr>            </table>        </div>         <div region="center"style="width:100%; height:100%; overflow-y:auto;border:solid 1px black">            <select id="Chinese" multiple="multiple" style="width: 100%; height: 82%;">                                <option value="01000000" style="color:#08298A">农药中毒</option>                                 <option value="01010000" style="color:#08298A">有机磷</option>                                 <option value="01010100" style="color:#08298A"> 敌敌畏</option>                                 <option value="01010200" style="color:#08298A">敌百虫</option>                                 <option value="01010300" style="color:#08298A">甲基内吸磷</option>                                 <option value="01010400" style="color:#08298A">对硫磷</option>                                 <option value="01010500" style="color:#08298A">甲基对硫磷</option>                                 <option value="01010600" style="color:#08298A">甲胺磷</option>                                 <option value="01010700" style="color:#08298A">乙酰甲胺磷</option>                                 <option value="01010800" style="color:#08298A">乐果</option>                                 <option value="01010900" style="color:#08298A">氧乐果</option>                                 <option value="01011000" style="color:#08298A">*</option>                                 <option value="01011100" style="color:#08298A">硫*</option>                                 <option value="01011200" style="color:#08298A">甲拌磷</option>                                 <option value="01011300" style="color:#08298A">二嗪农</option>                                 <option value="01011400" style="color:#08298A">二溴磷</option>                                 <option value="01011500" style="color:#08298A"> 八甲磷</option>                                 <option value="01011600" style="color:#08298A">马拉硫磷</option>                                 <option value="01011700" style="color:#08298A">久效磷</option>                                 <option value="01011800" style="color:#08298A">水胺硫磷</option>                                 <option value="01011900" style="color:#08298A">亚胺硫磷</option>                                 <option value="01012000" style="color:#08298A">杀扑磷</option>                                 <option value="01012100" style="color:#08298A">杀螟松</option>                                 <option value="01012200" style="color:#08298A">谷硫磷</option>                                 <option value="01012300" style="color:#08298A">苯硫磷</option>                                 <option value="01012400" style="color:#08298A">速灭磷</option>                                 <option value="01012500" style="color:#08298A">倍硫磷</option>                                 <option value="01012600" style="color:#08298A">磷胺</option>                                 <option value="01012700" style="color:#08298A">内吸磷</option>                                 <option value="01020000" style="color:#08298A">氨基甲酸酯</option>                                 <option value="01020100" style="color:#08298A">克百威</option>                                 <option value="01020200" style="color:#08298A"> 灭多威</option>                                 <option value="01020300" style="color:#08298A">甲萘威</option>                                 <option value="01020400" style="color:#08298A">速灭威</option>                                 <option value="01020500" style="color:#08298A">仲丁威</option>                                 <option value="01020600" style="color:#08298A">害扑威</option>                                 <option value="01020700" style="color:#08298A">异丙威</option>                                 <option value="01020800" style="color:#08298A">涕灭威</option>                                 <option value="01020900" style="color:#08298A">抗蚜威</option>                                 <option value="01021000" style="color:#08298A">呋喃威</option>                                 <option value="01021100" style="color:#08298A">残杀威</option>                                 <option value="01021200" style="color:#08298A">混灭威</option>                                 <option value="01021300" style="color:#08298A">硫双威</option>                                 <option value="01030000" style="color:#08298A">拟除虫菊酯</option>                                 <option value="01030100" style="color:#08298A">丙烯菊酯</option>                                 <option value="01030200" style="color:#08298A">甲醚菊酯</option>                                 <option value="01030300" style="color:#08298A">戊菊酯</option>                                 <option value="01030400" style="color:#08298A">苄呋菊酯</option>                                 <option value="01030500" style="color:#08298A">胺菊酯</option>                                 <option value="01030600" style="color:#08298A">氯菊酯</option>                                 <option value="01030700" style="color:#08298A">氟氰菊酯</option>                                 <option value="01030800" style="color:#08298A">氟氯氰菊酯</option>                                 <option value="01030900" style="color:#08298A">氯氰菊酯</option>                                 <option value="01031000" style="color:#08298A">顺式氯氰菊酯</option>                                 <option value="01031100" style="color:#08298A">溴氰菊酯</option>                                 <option value="01031200" style="color:#08298A">氰戊菊酯</option>             </select>         </div>    </div></body></html>

登录后复制

我的是好的，效果图如下：

再麻烦看下我哪里是不是写错了还是理解错了

按4楼方法为什么table的数值都跑到右面去了滚动条也没了

直接一个position:absolute 不是就可以了么

直接一个position:absolute 不是就可以了么是给小的DIV加么

直接一个position:absolute 不是就可以了么是给小的DIV加么

对，然后用js获取外层div的滚动高度，当外层div滚动时更新就好了。

把table单独放到一个div中，给div设置overflow:auto;

还有人有高见么坐等
简单的一个定位就好了，给你示例：

       <div style="position: relative;">           <div style="position: absolute;top:1px;left: 1px;width: 175px;padding: 5px 0 0 5px;background: #fff;">               <input type="text" />           </div>           <div style="height: 100px;width:200px;border: solid 1px red;overflow: auto;padding-top:30px;">               <table>                   <tr><td>1</td></tr>                   <tr><td>2</td></tr>                   <tr><td>3</td></tr>                   <tr><td>4</td></tr>                   <tr><td>5</td></tr>                   <tr><td>6</td></tr>               </table>           </div>       </div>

登录后复制

把table单独放到一个div中，给div设置overflow:auto;
你看我15楼的截图啊是给table单独放到一个div里了并且也设置aotu了但是不对啊

还有人有高见么坐等
简单的一个定位就好了，给你示例：

       <div style="position: relative;">           <div style="position: absolute;top:1px;left: 1px;width: 175px;padding: 5px 0 0 5px;background: #fff;">               <input type="text" />           </div>           <div style="height: 100px;width:200px;border: solid 1px red;overflow: auto;padding-top:30px;">               <table>                   <tr><td>1</td></tr>                   <tr><td>2</td></tr>                   <tr><td>3</td></tr>                   <tr><td>4</td></tr>                   <tr><td>5</td></tr>                   <tr><td>6</td></tr>               </table>           </div>       </div>

登录后复制

非常感谢基本满足结果了现在还有一个问题就是下拉滚动时 input是透明的如下图

还有人有高见么坐等
简单的一个定位就好了，给你示例：

       <div style="position: relative;">           <div style="position: absolute;top:1px;left: 1px;width: 175px;padding: 5px 0 0 5px;background: #fff;">               <input type="text" />           </div>           <div style="height: 100px;width:200px;border: solid 1px red;overflow: auto;padding-top:30px;">               <table>                   <tr><td>1</td></tr>                   <tr><td>2</td></tr>                   <tr><td>3</td></tr>                   <tr><td>4</td></tr>                   <tr><td>5</td></tr>                   <tr><td>6</td></tr>               </table>           </div>       </div>

登录后复制

非常感谢基本满足结果了现在还有一个问题就是下拉滚动时 input是透明的如下图

我给的示例的div上的就特意已经加上了背景：background: #fff; 你设置成你自己的颜色就行了，div的大小也可以根据实际情况调整下。

还有人有高见么坐等
简单的一个定位就好了，给你示例：

       <div style="position: relative;">           <div style="position: absolute;top:1px;left: 1px;width: 175px;padding: 5px 0 0 5px;background: #fff;">               <input type="text" />           </div>           <div style="height: 100px;width:200px;border: solid 1px red;overflow: auto;padding-top:30px;">               <table>                   <tr><td>1</td></tr>                   <tr><td>2</td></tr>                   <tr><td>3</td></tr>                   <tr><td>4</td></tr>                   <tr><td>5</td></tr>                   <tr><td>6</td></tr>               </table>           </div>       </div>

登录后复制

非常感谢基本满足结果了现在还有一个问题就是下拉滚动时 input是透明的如下图

我给的示例的div上的就特意已经加上了背景：background: #fff; 你设置成你自己的颜色就行了，div的大小也可以根据实际情况调整下。
非常感谢学习到很多谢谢~~

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn