时间戳

首页 > 解决方案 > 我找不到css“height”不起作用的原因

css - 我找不到css“height”不起作用的原因

问题描述

好吧，我制作了一个将用于网站的文件。你知道，我们有不同的设备（电脑，卖手机......）所以，我在 CSS 中使用“重量”和“高度”和“％”（我认为，“px”不是好方法。）

“体重”无所谓，但“身高”有问题。高度适用于“px”，但不适用于“%”

我猜，问题的原因是背景的高度，所以我修复了，但是，它也没有工作。所以，我修复了填充、边距、边框......但是，我没有找到解决方案。我不知道是什么问题，我该如何解决:(

附言。我用括号

[这是 HTML5 代码]

<!doctype html>
<html>
<head>
  <title>PIZZAchoice</title>
  <link rel="stylesheet" href="ChoicePizza.css">
  <meta charset="utf-8">
</head>
<body>

  <div class="company">
   i am tech
    </div>

  <div class ="cho1">
    <p></p>
  </div>
  <div class ="cho2">
    <p></p>
  </div>
  <div class ="cho3">
    <p></p>
  </div>
  <div class ="cho4">
    <p></p>
  </div>


  <div class = "next">
   next
    </div>

</body>
</html>

[这是CSS代码]

.company{
    padding: 1px;
    width: 150px;
    margin-left:2px;
    font-size: xx-large;
    font-weight: 600;
    color: yellow;
}




.cho1, .cho2, .cho3, .cho4 {
  padding: 1px;
  width:   24%;
  height:  40%;
  margin-top: 10px;
  margin-left: 2px;
  margin-right: 2px;
  float:left;

  border-style:ridge;
  border-color:saddlebrown;
  border-width:3px;  
}

.cho1
{
    background-image: url('치즈피자.jpg');
     background-size: 200%;
    background-repeat:no-repeat;
}

.cho2
{
    background-image: url('야채피자.jpg');
     background-size: 207%;
    background-repeat:no-repeat;

}

.cho3
{
     background-image: url('시카고피자.jpg');
     background-size: 206%;
    background-repeat:no-repeat;
}

.cho4
{
    background-image: url('프리슈또.jpg');
     background-size: 
    background-repeat:no-repeat;
}


.next{
    padding: 1px;
    width: 100px;
    height: 50px;

    border-style:ridge;
    border-color:whitesmoke;
    border-width:2px;

    position: absolute;
    top: 90%;
    left: 92%;

    text-align : center;

    font-size: xx-large;
    font-weight: 600;

    background-color: orangered;
    color:white;


}

body{
    background-image: url('선택배경.jpg');
        background-size: 100%;
        background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center


}

标签： csshtml

解决方案

父元素需要一个高度值。给你的 html 和 body 一个 100% 的高度。

如果父元素没有高度值，则子元素无法知道百分比的含义。“什么的40%？”

推荐阅读