子div高度适应固定父div_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

子div高度适应固定父div_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:26 PM

本帖最后由 linshigong2013 于 2013-12-25 16:30:31 编辑

aaaa
aaaa
是动态变化的 div id=aaa 高度宽度是固定的
我想达到无论 aaaa
aaaa
多少 div id=bbb 高度宽度自动适应
超出的部分 div id=bbb 的div出现横竖滚动条
目前我这个父div出现滚动条不是我想要的大侠们帮我调调

<div id="aaa" style="height: 150px;width: 300px;border: 1px solid #b4c9c6;margin: 4px 0 0 3px;background-color: #ffffff;	overflow: auto;">aaaa<br/>aaaa<br/>aaaa<br/>aaaa<br/><div id="bbb" style="SCROLLBAR-FACE-COLOR: #D5DEDB; SCROLLBAR-HIGHLIGHT-COLOR: #e9f5f8; OVERFLOW: auto; SCROLLBAR-SHADOW-COLOR: #ffffff; SCROLLBAR-3DLIGHT-COLOR: #deeb9f; SCROLLBAR-ARROW-COLOR: #123456; SCROLLBAR-TRACK-COLOR: #fcfdfd; SCROLLBAR-DARKSHADOW-COLOR: #deeb9f;width:100%;height:100%"><table cellspacing="0" rules="all" border="1" style="border-color:#D8E4F8;width:787px;border-collapse:collapse;">		<tr align="center" style="color:#404040;background-color:#E0E0E0;font-weight:normal;height:28px;">			<th scope="col" style="font-weight:normal;width:180px;"></th><th align="center" scope="col" style="font-weight:normal;"></th><th align="center" scope="col" style="font-weight:normal;width:60px;"><a href="javascript:__doPostBack('dg','Sort$pen03')" style="color:#404040;"></a></th><th align="center" scope="col" style="font-weight:normal;width:140px;"><a href="javascript:__doPostBack('dg','Sort$pen04')" style="color:#404040;"></a></th><th align="center" scope="col" style="font-weight:normal;width:60px;"></th><th align="center" scope="col" style="font-weight:normal;width:140px;"></th>		</tr><tr style="height:24px;">			<td align="left" style="width:180px;">                 </td><td align="left"></td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td>		</tr><tr style="height:24px;">			<td align="left" style="width:180px;">                 </td><td align="left"></td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td><td align="center" style="width:60px;"></td><td align="center" style="width:140px;"></td>		</tr><tr style="height:24px;">			<td align="left" style="width:180px;">                  </td><td align="left"></td><td align="center" style="width:60px;"></td><td align="center" style="width:140px;"></td><td align="center" style="width:60px;"></td><td align="center" style="width:140px;"></td>		</tr><tr style="height:24px;">			<td align="left" style="width:180px;">                 </td><td align="left">              </td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td>		</tr><tr style="height:24px;">			<td align="left" style="width:180px;">                 </td><td align="left">                </td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td><td align="center" style="width:60px;"> </td><td align="center" style="width:140px;"> </td>		</tr></table></div></div>

回复讨论(解决方案)

你这 div id=bbb 高度宽度自动适应，但超出的部分 div id=bbb 的div出现横竖滚动条，这很难实现吧，可以让超过aaa的高度后，aaa出现滚动条

把div id=bbb height:100%改成height:70px就是我想要的效果

但是这样就是写死了的了不会根据aaaa
aaaa
多少自动变化了

你这 div id=bbb 高度宽度自动适应，但超出的部分 div id=bbb 的div出现横竖滚动条，这很难实现吧，可以让超过aaa的高度后，aaa出现滚动条把div id=bbb height:100%改成height:70px就是我想要的效果

但是这样就是写死了的了不会根据aaaa
aaaa
多少自动变化了

呼叫高手难道无法实现吗

#bbb{height:100%;width:100%;overflow:scroll;}

<table style="width:200px;height:200px;border:1px solid #84C1FF;margin:50px auto;overflow: hidden">        <tr>            <td>                <div style="float: left">                asdfasfsadfa<br/>                asdfasfsadfa<br/>                asdfasfsadfa<br/>                asdfasfsadfa<br/>                asdfasfsadfa<br/>                </div>            </td>        </tr>        <tr>            <td>                <div style="height: 100%;width: 100%;overflow: auto">                <table>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                </table>                </div>            </td>        </tr>    </table>

楼上俩位大哥你们运行html代码了吗没效果啊

楼上俩位大哥你们运行html代码了吗没效果啊

你表格的行高和列宽要用百分比设置，不然表格适应外部的高度了，你里面的元素还是固定的当然没有用

不好意思，看错你的要求了
按照你的要求的话只能是使用js计算aaaa
aaaa
的高度，然后再算出#bbb需要的高度

我怎么感觉没有理解到你的意思呢？

你的代码的显示是这样的。

看起来，跟你想要的结果是相同的，没有问题。

同时，我也试了下，你说把div=bbb的高度设置成70px的效果，相同的效果啊，没有什么区别啊。

你不会是想要让滚动条，都显示在页面初始化的时候吧，就算是你把高度设置成70px,在增加你的aaaa
之后，多加几个，bbb还是会跑到下面去了，既然要自适应，那现在的效果有什么问题。

或者是，我没有能理解你想要达到一个怎么样的效果。

楼上俩位大哥你们运行html代码了吗没效果啊

<table style="width:200px;height:200px;border:1px solid #84C1FF;margin:50px auto;overflow: hidden">    <tr>        <td>            <div style="float: left">                asdfasfsadfa<br/>                asdfasfsadfa<br/>                asdfasfsadfa<br/>                asdfasfsadfa<br/>                asdfasfsadfa<br/>            </div>        </td>    </tr>    <tr>        <td>            <div style="height: 100%;width: 200px;overflow: auto">                <table>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                    <tr><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td><td>aaaaaaaaaaaaa</td></tr>                </table>            </div>        </td>    </tr></table>

chrome好的

你截得图，是设置成70px的样子吧，我自己试过

你要的这个效果，在父元素高度一定的情况下，是不可能实现的

你再添加几个aaaa
试试。就算是70px，也不会显示横向的滚动条了。

如果你非要这样的效果，那就去用DIV的固定定位，去模拟吧，然后勇JS控制模拟出来的滚动条。

不过复杂度就会很高了。

看来只能是写死的height 不能通过某个属性来实现了你截得图，是设置成70px的样子吧，我自己试过

你要的这个效果，在父元素高度一定的情况下，是不可能实现的

你再添加几个aaaa
试试。就算是70px，也不会显示横向的滚动条了。

如果你非要这样的效果，那就去用DIV的固定定位，去模拟吧，然后勇JS控制模拟出来的滚动条。

不过复杂度就会很高了。

你写死也不行啊

你说的aaaa
这个个数不定的，你再添加几个，还是用70px看看效果，还是和你现在的想要的效果不同的。

这个不是写死不写死的问题。

声明

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

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。