如何使边框始终填充整个页面

我想使边框始终为全长。当我的屏幕等于或大于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

我怎样才能使边框整个页面时，浏览器宽度小于990px。

来源

2014-12-31 mybirthname

你可以让另一主容器和使用inline-block和border有：

<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>

除了我建议你使用classnames会更容易处理的样式：

.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; 
 
}

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

来源

2014-12-31 15:00:07 DaniP

我很想念min-width！感谢您的快速回答。我会再接受3分钟。 – mybirthname

@mybirthname很高兴帮助你:) – DaniP

如何使边框始终填充整个页面

回答

相关问题