简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

Arrange 2 DIVs side by side to achieve the effect of 2 frames side by side_html/css_WEB-ITnose

WBOY
Release： 2016-06-24 12:26:03
Original
1126 people have browsed it

<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>
Copy after login

<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>
Copy after login

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>
Copy after login


Use negative margins, something like this?

Then use js to read the highest width, and then define this width to another div

Related labels：
并排2个DIV达到并排2个frame效果
source：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-ITnose Next article：Exploring the Web front-end learning route_html/css_WEB-ITnose
Statement of this Website
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
Latest Articles by Author
Latest Issues
Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
From 2024-04-04 18:40:04
0
1
3528
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！