[ヘルプ] ページ上のヘルプは比較的固定_html/css_WEB-ITnoseです。-htmlチュートリアル-php.cn

回复讨论(解决方案)

ホームページ

ウェブフロントエンド

htmlチュートリアル

[ヘルプ] ページ上のヘルプは比較的固定_html/css_WEB-ITnoseです。

Jun 24, 2016 pm 12:25 PM

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

回复讨论(解决方案)

position:fixed
?

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

&lt;div style=&quot;overflow:hidden;&quot;&gt;     &lt;div region=&quot;north&quot;&gt;input放在这里&lt;/div&gt;     &lt;div region=&quot;center&quot; style=&quot;overflow-y: auto;&quot;&gt;table放在这里&lt;/div&gt;&lt;/div&gt;

ログイン後にコピー

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

&lt;div split=&quot;true&quot; style=&quot;overflow:hidden;&quot;&gt;            &lt;div region=&quot;north&quot;&gt;input放在这里&lt;/div&gt;            &lt;div region=&quot;center&quot; style=&quot;overflow-y: auto;&quot;&gt;table放在这里&lt;/div&gt; &lt;/div&gt;

ログイン後にコピー

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

&lt;div split=&quot;true&quot; style=&quot;overflow:hidden;&quot;&gt;            &lt;div region=&quot;north&quot;&gt;input放在这里&lt;/div&gt;            &lt;div region=&quot;center&quot; style=&quot;overflow-y: auto;&quot;&gt;table放在这里&lt;/div&gt; &lt;/div&gt;

ログイン後にコピー

现在是这样一个结构 <div1> <input type="text"> <table>^^^</table></div>

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

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

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

&lt;div split=&quot;true&quot; style=&quot;overflow:hidden;&quot;&gt;            &lt;div region=&quot;north&quot;&gt;input放在这里&lt;/div&gt;            &lt;div region=&quot;center&quot; style=&quot;overflow-y: auto;&quot;&gt;table放在这里&lt;/div&gt; &lt;/div&gt;

ログイン後にコピー

.
现在是这样 <div 大><div 小><input></div 小><table></table></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"

&lt;div split=&quot;true&quot; style=&quot;overflow:hidden;&quot;&gt;            &lt;div region=&quot;north&quot;&gt;input放在这里&lt;/div&gt;            &lt;div region=&quot;center&quot; style=&quot;overflow-y: auto;&quot;&gt;table放在这里&lt;/div&gt; &lt;/div&gt;

ログイン後にコピー

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

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

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

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

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

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

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

ログイン後にコピー

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

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

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

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

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

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

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

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

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

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

ログイン後にコピー

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

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

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

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

ログイン後にコピー

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

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。