Home > Article > Web Front-end > Layers automatically adapt to height_Experience exchange

Layers automatically adapt to height_Experience exchange

WBOYOriginal: 2016-05-16 12:10:291623browse

<title></title>
<style type="text/css"> 
body { 
font:12px Tahoma;margin:0px;text-align:center; 
} 
a:link,a:visited {font-size:12px;text-decoration:none;} 
a:hover{}

/*页面层容器*/ 
#container { 
width:780px;margin:0px auto;background:#fff 
}

/*页面头部*/ 
#header {background:url(logo.gif) no-repeat;}

#banner { 
    background:url(banner.jpg) 0px no-repeat; /*加入背景图片*/;background:#999; 
    width:780px; /*设定层的宽度*/ 
    margin:auto; /*层居中*/ 
    height:200px; /*设定高度*/ 
    border-bottom:5px solid #EFEFEF; /*画一条浅灰色实线*/ 
    clear:both /*清除浮动*/ 
} 
#pagebody { 
    width:780px; /*设定宽度*/ 
    margin:0px auto; /*居中*/ 
    background:#000 
} 
#sidebar { 
    width:200px; /*设定宽度*/ 
    text-align:left; /*文字左对齐*/ 
    float:left; /*浮动居左*/ 
    background:#f3c;color:#666

overflow:hidden; /*超出宽度部分隐藏*/ 
    
    height:300px; 
    padding:0px

} 
#mainbody { 
    width:580px; 
    text-align:left; 
     margin:0px auto; /*居中*/ 
     
  float:right;

overflow:hidden; 
     color:#fff

}

/*页面底部*/ 
#footer{ 
width:780px;margin:0 auto;height:65px;background:#999;repeat-x;color:#ff0066;clear:both; 
} 
</style>
      <div id="container"></div>
<div id="header">
<div id="banner"></div>
</div>
<div id="pagebody">
<div id="sidebar"><h2>This layer needs to be synchronized with the layer on the right, and also needs adaptive height</h2></div>
<div id="mainbody"><h2>Is there any way to make this layer automatically adapt to the height?</h2></div>
<div style="clear:both;height:1px;margin-bottom:-1px;padding:0; background:#FF0000"></div>
</div>
<div id="footer">This layer remains unchanged</div>

[Ctrl+A to select all Note: If you need to introduce external Js, you need to refresh it to execute ]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to make the table a fixed size and display the excess parts as ellipses_Experience exchangeNext article：How to make the table a fixed size and display the excess parts as ellipses_Experience exchange

See more

Layers automatically adapt to height_Experience exchange

Related articles