Question

我试图制作一个包含3个div的div，每个div包含一个img。但我想让第一个div（顶部）的高度为屏幕尺寸的10％，第二个（中间）为60％，第三个（底部）为30％。实际上，他们没有调整大小，他们的全尺寸。

我的代码实际上是：

#droite
{
    display:block;          
    float:left;
    margin-left:81%;            
    width:19%;
    height:100%;
}

.logo
{
    top-margin:0%;
    height:10%;
    width:100%;
}
.DroiteMilieu
{
    top-margin:10%;
    width:100%;
    max-height:60%;
    height:100%;
}
.basDePage
{
    top-margin:80%;
    height:30%;
    width:100%;
}
img
{
    position:absolute;
}

（#droite实际上是大分区，其中logo是第一个div，droiteMilieu是第二个，basDePage是第三个。（我将很快重命名它们，但我希望它首先工作/ :)）

和html：

    <div id="droite">
    <div class="logo">
        <img src="logo.png" style="max-width:100%; max-height:100%; position:relative;"</img>
    </div>
    <div class="DroiteMilieu">
        <img src="droite.PNG" style="max-width:100%; max-height:100%; position:relative;"</img>
    </div>
    <div class="basDePage">
        <img src="minimap.png" style="max-width:100%; max-height:100%; position:relative;" </img>
    </div>
</div>

我的html / css实际上还是很糟糕，而且我不知道我的错误所在。：/ 有人能帮助我吗？

编辑[问题解决]：使其有效的方法是： CSS：

html, body {
    margin: 0;
    height: 100%;
    width:100%;
}
#droite {
    display:block;          
    float:left;
    margin-left:81%;            
    width:19%;
    height:100%;
}
.logo {
    height: 10%;
    background: red;
}
.DroiteMilieu {
    height: 60%;
    background: blue;
}  
.basDePage {
    height: 30%;
    background: green;
}
#droite img {
    max-width: 100%;
    max-height: 100%;
    position: relative;
}

和HTML：

<div id="droite">
    <div class="logo">
        <img src="logo.png" style="width:100%; height:100%;">
    </div>
    <div class="DroiteMilieu">
        <img src="droite.PNG" style="width:100%; height:100%;">
    </div>
    <div class="basDePage">
        <img src="minimap.png" style="width:100%; height:100%;">
    </div>
</div>

Answer 1

这是一个适合您的解决方案。

您不需要上边距和上边距，因为它们默认为100％宽度并叠加在顶部。

为了使浮动的div具有100％的高度，身体也需要，所以我添加了它。

html, body {
  margin: 0;
  height: 100%;
}
#droite {
    display:block;          
    float:left;
    margin-left:81%;            
    width:19%;
    height:100%;
}
.logo {
    height: 10%;
  background: red;
}
.DroiteMilieu {
    height: 60%;
  background: blue;
}
.basDePage {
    height: 30%;
  background: green;
}
#droite img {
  max-width: 100%;
  max-height: 100%;
  position: relative;
}

<div id="droite">
  <div class="logo">
    <img src="logo.png">
  </div>
  <div class="DroiteMilieu">
    <img src="droite.PNG">
  </div>
  <div class="basDePage">
    <img src="minimap.png">
  </div>
</div>

Answer 2

你犯了一些错误，首先，top-margin不是有效的财产。您必须使用margin-top。

其次，如果你添加height: 100%;，你要求你的div占用其父级的100％空间（在这种情况下，你的div是否占据屏幕高度的100％？）。

要回答您的问题，如果您的项目只需要支持CSS3，我建议您使用该属性：vh或视口高度。

这是一个小教程： https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

你可以这样使用它：

 .droite{
     height: 10vh; /* If you need 10% of the viewport height, then you write it this way */
  }

换句话说，1vh =视口高度的1％。

Answer 3

你正在设置高度：100％on .DroiteMilieu，它继承自droite并使其成为100％。这可能会推动其他人。

删除.DroiteMilieu上的最大高度：60％并设置高度：60％;看看你得到了什么。

加上top-margin：不是有效的css属性

.DroiteMilieu
{
    top-margin:10%; <---- bad css
    width:100%;        
    height: 60%; <----
}

CSS中的CSS大小调整div

3 个答案: