Question

我想创建一个带有边框的页面，如下所示：

我的HTML看起来像这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stuff</title>
    <link href="css/projects.css" rel="stylesheet">
</head>
<body>
</body>
</html>

和CSS：

html {
    height: 100%;
    border: 10px solid red;
}

但由于某种原因，页面底部会溢出滚动条，底部边框会从视图中切除，直到向下滚动。如何在没有滚动条的情况下在页面周围显示边框？

Answer 1

有了这个：

html {
        height: 100%;
        border: 10px solid red;
        box-sizing: border-box;
    }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Stuff</title>
    <link href="css/projects.css" rel="stylesheet">
</head>
<body>
</body>
</html>

box-sizing: border-box完全符合您的要求，即使边框不计入元素的高度。它将在元素内部而不是在元素之外占据空间。

Answer 2

问题是在计算额外边界高度之前考虑之前的100％高度。为避免溢出，您需要从100％高度计算中减去20px（顶部和底部10px）。这可以通过calc(100% - 20px)：

完成

html { height: calc(100% - 20px); border: 10px solid red; }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Stuff</title> <link href="css/projects.css" rel="stylesheet"> </head> <body> </body> </html>

希望这有帮助！：）

如何删除滚动条并显示实心边框？

2 个答案: