两个div，一个占60%，另一个占其余

Question

我有两个div，第一个占60%，另一个刚好在上面。我想要div"商店"在水平方向上取60%；"游戏"；将使其余部分保持水平。

html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
#main {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
border: 2px solid red;
}
#Shop {
float: left;
width: 60%;
height: 100%;
border: 2px solid green;
overflow: hidden;
}
#Gameplay {
border: 2px solid blue;
}

<div class="Main" id="main">
<div class="content" id="Shop">
<h1>Laboratoire des tests JS </h1>
</div>
<div class="content" id="Gameplay">
</div>
</div>

Answer 1

生成父display: flex;并将width: 60%;应用于#Shop。然后，您可以将flex-grow: 1或width: 40%;应用于#Gameplay，以使其具有剩余宽度

html,
body {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
#main {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: auto;
border: 2px solid red;
}
#Shop {
height: 100%;
border: 2px solid green;
overflow: hidden;
width: 60%;
background-color: dodgerblue;
}
#Gameplay {
flex-grow: 1;
width: 40%;
background-color: hotpink;
border: 2px solid blue;
}

<div class="Main" id="main">
<div class="content" id="Shop">
<h1>Laboratoire des tests JS </h1>
</div>
<div class="content" id="Gameplay">
</div>
</div>