Question

我正在尝试在我的网页的整个主体周围创建边框，但每当我在身体标签周围放置边框时，它都无法到达底部。此外，由于某种原因，在页面的正文和底部之间有一个空格。请指教！

以下是代码:(请参阅https://jsfiddle.net/04tpunop/）

HTML：

<!DOCTYPE html>
<body>
    <header>
        <nav>
            <div id="navBar">
          <a class="hdrBtn">Button</a>
                    <a class="hdrBtn">Button</a>
            </div>
        </nav>
    </header>
    <div id="banner">
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
    </div>
    <div id="content">
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
            <h1>Content</h1>
    </div>
</body>

CSS：

@import 'https://fonts.googleapis.com/css?family=Open+Sans';

html {
    background-color: black;
    background-size: 500px;
}

body {
    width: 80%;
    max-width: 1250px;
    margin: 0 auto;
    /*padding: 0 20px;*/
    background-color: white;
    overflow: auto;
  border: 20px solid white;
}

header {
    top: 0;
    width: 80%;
    border-top: 10px solid white;
    border-bottom: 2px solid #ff0000;
    position: fixed;
    z-index: 10;
    background-color: white;
}

#banner {
    width: 80%;
    height: 500px;
    position: fixed;
    top: 68px;
    background-color: blue;
}

#content {
    width: 100%;
    position: relative;
    top: 568px;
    background-color: grey;
    /*height: 1000px;*/
}

a.hdrBtn {
    font-family: 'Open Sans', sans-serif;
    color: black;
    padding: 16px 15px 10px;
    font-size: 30px;
    border: none;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    text-decoration: none;
    outline: none;
    display: inline-block;
    text-align: center;
    -o-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -webkit-transition: color 0.2s linear;
    -ms-transition: color 0.2s linear;
    transition: color 0.2s linear;
    -o-transition: background-color 0.1s linear;
    -moz-transition: background-color 0.1s linear;
    -webkit-transition: background-color 0.1s linear;
    -ms-transition: background-color 0.1s linear;
    transition: background-color 0.1s linear;
  margin-left: 6%;
}

button.hdrBtn:hover, a.hdrBtn:hover {
    background-color: #f1f1f1;
    color: #ff0000;
}

.center {
    text-align: center;
}

Answer 1

我认为你的身体可能只是包裹内容。尝试在CSS中将高度设置为100％。

如果这不起作用，请尝试将内容包装在高度和宽度设置为100％的DIV中

Answer 2

您需要从#banner中删除position: fixed;，从#content

删除position: relative;

还需要在标题中增加top: 0;的值以显示顶部边框

身体边界没有到达身体的底部

2 个答案: