Question

我想让边框顶部始终全长。当我的屏幕等于或大于990px时，一切看起来都没问题，但如果我降低了它（显示垂直滚动），border-top仅放在可见部分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width" />    
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background:aliceblue; border-top: solid 10px green;">
    <form>
       <div style="width:900px; margin-left:auto; margin-right:auto;">TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTT
       ESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTEST</div>
    </form>

</body>
</html>

Here is JSFiddle link

当浏览器宽度小于990像素时，如何为整个页面制作边框。

Answer 1

您可以创建另一个主容器并使用inline-block和border：

＆＃13;

<body style="background:aliceblue">
    <div style="border-top: solid 10px green;display:inline-block;min-width:100%;">
    <form>
       <div style="width:900px; margin-left:auto; margin-right:auto;">TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTT
       ESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES TTESTTESTTESTTESTTESTTESTTEST</div>
    </form>
    </div>
</body>

＆＃13;

除了我建议您使用classnames将更容易处理样式：

＆＃13;

.blue {
  background: aliceblue;
}
.main {
  border-top: solid 10px green;
  display: inline-block;
  min-width: 100%;
}
.main form > div {
  width: 900px;
  margin-left: auto;
  margin-right: auto;
}

＆＃13;

<body class="blue">
  <div class="main">
    <form>
      <div>TESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTT ESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTESTTES TTESTTESTTESTTESTTESTTESTTEST</div>
    </form>
  </div>
</body>

＆＃13;

如何使border-top始终填满整个页面

1 个答案: