>  기사  >  웹 프론트엔드  >  并排2个DIV达到并排2个frame效果_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 12:26:031118검색

<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><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>    </div>  <div class="a">    </div></div>   	</body>  </html>


利用负的外边距,类似这样的吗?

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.