并排2个DIV达到并排2个frame效果_html/css_WEB-ITnose-html教程-PHP中文网

并排2个DIV达到并排2个frame效果_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 12:26:03

原创

1256人浏览过

<frameset cols="227, *" framespacing="0" frameBorder="0" border="0">    <frame src="" name="menuFrame" frameborder="no" scrolling="auto" />    <frame src="" name="mainFrame" frameborder="no" scrolling="yes" /></frameset>

登录后复制

<style type="text/css">#content{}.com-l{	width:227px;	float:left;}.com-r{    margin-left: 227px;}</style><div id="content">	<div class="com-l"></div>	<div class="com-r"></div></div>

登录后复制

现在想用2个DIV达到frameset的这种效果，但是高度没有上面的自适应。

回复讨论(解决方案)

你不指定高度吗？

你要怎么样的高度呢？100%屏幕高度？
height:100%；

你要怎么样的高度呢？100%屏幕高度？
height:100%；
子元素继承不了100%；

我希望一出来就是两个子元素就是屏幕高度，然后任意一者增加高度，则两者会等高。就和框架的效果是一样的，现在所有的元素都得指定高度。

<!DOCTYPE html>  <html lang="en">    <head>      <meta charset="gb2312" />      <title></title>      <style>	.c{width:960px;margin:0 auto;overflow:hidden;}.a{	width:478px;	border:1px solid red;	background:#aaa;	min-height:100px;	float:left;	padding-bottom:5520px;	margin-bottom:-5500px;}.b{	position:absolute;	bottom:0;}	</style></head>  <body>  <div class = "c">    <div class="a"><p>a</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/2146">
                            <img src="https://img.php.cn/upload/ai_manual/000/000/000/175680265669916.png" alt="简篇AI排版">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/2146">简篇AI排版</a>
                            <p>AI排版工具，上传图文素材，秒出专业效果！</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="简篇AI排版">
                                <span>554</span>
                            </div>
                        </div>
                        <a href="/ai/2146" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="简篇AI排版">
                        </a>
                    </div>
                <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>a</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>a</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>a</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>a</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>a</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>a</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><p>a</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>    </div>  <div class="a">    </div></div>   	</body>  </html>

登录后复制

利用负的外边距，类似这样的吗？

那就利用js，读取最高的那个宽度，然后再定义这个宽度给另一个div