Question

我正在尝试在网页上添加一个页脚但是我有一些尺寸问题，我希望有人能说清楚。代码如下所示：

<!DOCTYPE html>
 <html lang="en-CA">
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>
    Home
    </title>
</head>
<body>
    <div class="header">
        <a href="index.html" style="text-decoration: none">
        <img class="logo" src="logo.png" alt="logo_text">
        </a>
        <span class="tabs">
        <a class="link" href="page1.html">Tab1</a>
        <a class="link" href="page2.html">Tab2</a>
        <a class="link" href="page3.html">Tab3</a>
        <a class="link" href="page4.html">Tab4</a>
        </span>
        <img id="combologo" src="combo.png" alt="combologo_text" align="right">
    </div>  
    <div id="scrollarea">
        <marquee class="scroller" scrollamount="15">
        <span id="scrolltext1">
        Text
        </span>
        <span id="scrolltext2">
        Text 
        </span>
        <span id="scrolltext3">
        Text 
        </span>
        </marquee><br>
    </div>
    <div class="contentleft">
        <h2 class="pagetitle">
        This is the header
        </h2>
        <p>
        Body Text<br><br>
        Body Text<br><br>
        Body Text
        </p>
    </div>
    <div class="footer">
        <img class="bottomlogo" src="logo.png" alt="bottomlogo_text" align="right">         
        <br><br>2016<br>
        This Website Is Still Under Construction - Coming Soon!
    </div>
</body>

相应的样式表如下所示：

html {
     height: 100%;
     width: 100%
}

body {
     margin: 0;
     font-family: rexlia;
     font-size: 1vw;
     width: 100%;
     height: 100%;
     background: url(cubes.jpg);
     background-repeat: no-repeat;
     background-size: cover;
}

hr {
   border-color: black;
   background-color: black;
   color: black;
   margin: 0;
}

.logo {
      width: 20%;
      margin-top: 2%;
      margin-left: 2%;
      text-decoration: none;
}

.link {
      margin-right: 3%; 
      color: black;
      text-decoration: none;
      background-color: transparent;
}

.link:hover {
            color: white;
            background-color: rgb(80,80,80);
}

.header {
        font-style: italic;
        background: rgb(80,80,80);
        background: -webkit- linear-gradient(rgb(80,80,80), white);
        background: -o-linear- linear-gradient(rgb(80,80,80), white);
        background: -moz-linear- linear-gradient(rgb(80,80,80), white);
        background: linear-gradient(rgb(80,80,80), white);
        padding-bottom: 0.7%;
}

.scroller {
          font-size: 2vw;
          color: white;
}

#scrollarea {
            background: rgb(80,80,80);
            padding-top: 1%;
            padding-bottom: 1%;
            font-style: italic;
}

.pagetitle {
           font-style: italic;
 }

.contentleft {
             padding-left: 2%;
             padding-top: 1%;
             float: left;
             width: 45%;
}

.footer {
        clear: both;
        background: rgb(80,80,80);
        background: -webkit- linear-gradient(white, rgb(80,80,80));
        background: -o-linear- linear-gradient(white, rgb(80,80,80));
        background: -moz-linear- linear-gradient(white, rgb(80,80,80));
        background: linear-gradient(white, rgb(80,80,80));
        text-align: right;
        font-style: italic;
        padding: 2%;
        width: 100%;
}

.tabs {
      margin-left: 3%;
      color: black;
}

.bottomlogo {
             width: 6%;
}

#combologo {
           width: 13%;
           margin-top: 1%;
           margin-right: 2%;
}

#scrolltext1 {
             margin-right: 100%;
}

#scrolltext2 {
             margin-right: 100%;
}

#cubes {
       width: 45%;
}

我已将其剥离以简化问题，但基本上我遇到的问题是：标题，滚动条（选框）和正文都是相同的宽度。由于某种原因，页脚比其他页面宽。正如你可以看到html块设置为1005，那么正文设置为100％，所以页脚也设置为100％，它不应该是它的父元素（正文）的100％吗？如果我把100％拿出来是有效的，但是我想弄清楚为什么它正在做它正在做的事情。对不起，我是HTML新手。

Answer 1

将padding添加到100％的已定义width时导致的问题。您可以删除width:100%，但不需要，div仍会覆盖100％的父级。

如果要保留该宽度，则可以添加box-sizing CSS属性，以确保填充/边框不会影响总宽度/高度计算。

footer {
   box-sizing:border-box;
}

示例：

footer {
  padding:1em;
  background:lightblue;
  margin-bottom:1em;
}

footer:nth-of-type(1) {
  width:100%;
}

footer:nth-of-type(2) {
  width:100%;
  box-sizing:border-box;
}

<footer>footer with padding and 100% width</footer>
<footer>footer with padding and 100% width and box-sizing</footer>
<footer>footer with padding</footer>

页脚太宽

1 个答案: