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

chro008 2013-12-04 07:02:03
现在 有一个文本框和一个table 在同一个<div下> （这是个弹出窗口，点击后弹出该DIV）
由于table内很多行 所以导致弹出的窗口有垂直滚动条，当滚动条滚动时 文本框也会随之滚动
希望可以做到只有table数据随之滚动，文本框在最上面固定 需要怎么做呢？
...全文
365 24 打赏 收藏 转发到动态 举报
写回复
用AI写文章
24 条回复
切换为时间正序
请发表友善的回复…
发表回复
chro008 2013-12-05
  • 打赏
  • 举报
 回复
还有人有高见么 坐等
chro008 2013-12-05
  • 打赏
  • 举报
 回复
引用 7 楼 xinguotiantian 的回复:
你不想改变现有结构 可以参考这个（不过真没有我那个方法方便）：http://blog.sina.com.cn/s/blog_62f573ad01013ntd.html
虽然没有解决我的问题 依然谢谢你~~~
嫣如舜华 2013-12-05
  • 打赏
  • 举报
 回复
你不想改变现有结构 可以参考这个（不过真没有我那个方法方便）：http://blog.sina.com.cn/s/blog_62f573ad01013ntd.html
chro008 2013-12-05
  • 打赏
  • 举报
 回复
引用 4 楼 xinguotiantian 的回复:
外面那层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 大><div 小><input></div 小><table></table></div 大> 只修改 div 小 和 input 可以实现我说的text 在div大最上面固定么
chro008 2013-12-05
  • 打赏
  • 举报
 回复
引用 4 楼 xinguotiantian 的回复:
外面那层div加个split="true" 
<div split="true" style="overflow:hidden;">      
      <div region="north">input放在这里</div>      
      <div region="center" style="overflow-y: auto;">table放在这里</div> 
</div>
现在是这样一个结构 <div1> <input type="text"> <table>^^^</table></div> div table 相关都在JSP里面 很多页面都用到了搜索框 即 text文本框 所以 这个是写在JS里面的 现在想的是 只改 <input>这里 让文本框 相对于DIV固定在最上面 就是看table中的行 翻滚 但是文本框一直在div最上面即可 可以实现么
嫣如舜华 2013-12-05
  • 打赏
  • 举报
 回复
外面那层div加个split="true" 
<div split="true" style="overflow:hidden;">      
      <div region="north">input放在这里</div>      
      <div region="center" style="overflow-y: auto;">table放在这里</div> 
</div>
嫣如舜华 2013-12-05
  • 打赏
  • 举报
 回复 
<div style="overflow:hidden;">
     <div region="north">input放在这里</div>
     <div region="center" style="overflow-y: auto;">table放在这里</div>
</div>
chro008 2013-12-05
  • 打赏
  • 举报
 回复
引用 1 楼 zzgzzg00 的回复:
position:fixed ?
不太对， 这个属性是对于整个页面固定的 而我要的是一个div里的另一个DIV 针对外层DIV固定
chro008 2013-12-05
  • 打赏
  • 举报
 回复
引用 23 楼 whatisma 的回复:
[quote=引用 22 楼 chro008 的回复:] [quote=引用 20 楼 whatisma 的回复:] [quote=引用 9 楼 chro008 的回复:] 还有人有高见么 坐等
简单的一个定位就好了，给你示例： 
       <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>
[/quote] 非常感谢 基本满足结果了 现在还有一个问题就是 下拉滚动时 input是透明的 如下图 [/quote] 我给的示例的div上的就特意已经加上了背景：background: #fff; 你设置成你自己的颜色就行了，div的大小也可以根据实际情况调整下。[/quote] 非常感谢 学习到很多 谢谢~~
whatisma 2013-12-05
  • 打赏
  • 举报
 回复
引用 22 楼 chro008 的回复:
[quote=引用 20 楼 whatisma 的回复:] [quote=引用 9 楼 chro008 的回复:] 还有人有高见么 坐等
简单的一个定位就好了，给你示例： 
       <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>
[/quote] 非常感谢 基本满足结果了 现在还有一个问题就是 下拉滚动时 input是透明的 如下图 [/quote] 我给的示例的div上的就特意已经加上了背景：background: #fff; 你设置成你自己的颜色就行了，div的大小也可以根据实际情况调整下。
chro008 2013-12-05
  • 打赏
  • 举报
 回复
引用 20 楼 whatisma 的回复:
[quote=引用 9 楼 chro008 的回复:]
还有人有高见么 坐等

简单的一个定位就好了，给你示例：
       <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>
[/quote]

非常感谢 基本满足结果了 现在还有一个问题就是 下拉滚动时 input是透明的 如下图
chro008 2013-12-05
  • 打赏
  • 举报
 回复
引用 19 楼 ziyu529 的回复:
把table单独放到一个div中，给div设置overflow:auto;
你看我15楼的截图啊 是给table单独放到一个div里了 并且也设置aotu了 但是不对啊
whatisma 2013-12-05
  • 打赏
  • 举报
 回复
引用 9 楼 chro008 的回复:
还有人有高见么 坐等
简单的一个定位就好了，给你示例： 
       <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>
ziyu529 2013-12-05
  • 打赏
  • 举报
 回复
把table单独放到一个div中，给div设置overflow:auto;
Cocl 2013-12-05
  • 打赏
  • 举报
 回复
引用 17 楼 chro008 的回复:
引用 16 楼 a274295732 的回复:
直接一个position:absolute 不是就可以了么
是给小的DIV加么
对，然后用js获取外层div的滚动高度，当外层div滚动时更新就好了。
chro008 2013-12-05
  • 打赏
  • 举报
 回复
引用 16 楼 a274295732 的回复:
直接一个position:absolute 不是就可以了么
是给小的DIV加么
Cocl 2013-12-05
  • 打赏
  • 举报
 回复
直接一个position:absolute 不是就可以了么
chro008 2013-12-05
  • 打赏
  • 举报
 回复
引用 11 楼 xinguotiantian 的回复:
我的是好的，效果图如下：

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

按4楼方法 为什么table的数值都跑到右面去了 滚动条也没了
嫣如舜华 2013-12-05
  • 打赏
  • 举报
 回复 
<!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>
chro008 2013-12-05
  • 打赏
  • 举报
 回复
引用 11 楼 xinguotiantian 的回复:
我的是好的，效果图如下：
我用你的 为什么 显示出来就没有下拉条了。
加载更多回复（4）
html怎么办文本框固定,【求助】页面求助 文本框相对固定_html/css_WEB-ITnose
现在 有一个文本框和一个table 在同一个(这是个弹出窗口，点击后弹出该DIV)由于table内很多行 所以导致弹出的窗口有垂直滚动条，当滚动条滚动时 文本框也会随之滚动希望可以做到只有table数据随之滚动，文本框在最上面固定 需要怎么做呢？回复讨论(解决方案)position:fixed?position:fixed? 不太对， 这个属性是对于整个页面固定的 而我要的是一个div里的另一个...
JAVAWEB-NOTE01：查询正则表达式网址
文章目录unit01-MySQL数据库概述什么是数据库？什么是关系型数据库？数据库相关概念什么是SQL语言？连接mysql服务器数据库及表操作创建、删除、查看数据库(注意删数据库不要把它系统自带的数据库删除 mysql,information_schema, performance_schema)创建、删除、查看表 (对表进行操作需要先进入到数据库)新增、更新、删除(表记录)查询表记录基础查询WHERE子句查询模糊查询(也属于where子句查询)多行函数查询（对行进行操作如：count,max,min
webmagic采集CSDN的Java_WebDevelop页面
使用webmagic采集博客类的网站示例
web day3
有哪些端？ Web前端手机也行电脑也行-浏览器 移动端在手机 PC客户端在电脑 后端/后台 前端主要负责两个事： 负责用户数据的输入 负责向用户展示数据 前端主要的知识点 HTML CSS JavaScript 第一部分 HTML5 HTML：超文本标记语言 将数据进行基础的排版 根据标签的定义进行语义或排版 1.1 HTML5常见元素与属性 1.1.1 基本元素 html：HTML文档的根标签 head：页面的头部，存放的是一些关于页面的设置等信息，不会当成正文显示在网页里 body：页面的
web前置课笔记
有哪些端？ Web前端手机也行电脑也行-浏览器 移动端在手机 PC客户端在电脑 后端/后台 前端主要负责两个事： 负责用户数据的输入 负责向用户展示数据 前端主要的知识点 HTML CSS JavaScript 第一部分 HTML5 HTML：超文本标记语言 将数据进行基础的排版 根据标签的定义进行语义或排版 1.1 HTML5常见元素与属性 1.1.1 基本元素 html：HTML文档的根标签 head：页面的头部，存放的是一些关于页面的设置等信息，不会当成正文显示在网页里 body：页面的
CSS

61,112

社区成员

60,730

社区内容

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章