Home > Article > Web Front-end > Arrange 2 DIVs side by side to achieve the effect of 2 frames side by side_html/css_WEB-ITnose
Arrange 2 DIVs side by side to achieve the effect of 2 frames side by side_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:26:031118browse
<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> Now I want to use 2 DIVs to achieve the frameset effect, but the height is not adaptive as above.
Reply to discussion (solution)
Don’t you specify the height?
What height do you want? 100% screen height?
height:100%;
What height do you want? 100% screen height?
height:100%;
Child elements cannot inherit 100%;
I hope that the two child elements will be the height of the screen as soon as they come out, and then if the height of any one is increased, the two will be the same height. It's the same effect as the frame, now all elements have to specify a height.
<!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> Use negative margins, something like this?
Then use js to read the highest width, and then define this width to another div
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：There is a drop-down menu in the website navigation bar, but when the drop-down menu appears, it will push the content below. What should I do? ? ? Ask for help_html/css_WEB-ITnoseNext article：There is a drop-down menu in the website navigation bar, but when the drop-down menu appears, it will push the content below. What should I do? ? ? Ask for help_html/css_WEB-ITnose