Question

我的代码有问题：

 @import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,latin-ext);
 body {
   background-image: url("img/background.jpg");
   background-size: 100% auto;
   background-repeat: no-repeat;
   margin: 0;
   height: 100%;
   width: 100%;
 }
 .container {
   width: 100%;
   height: 100%;
 }
 .header {
   display: table;
   width: 100%;
   position: fixed;
   height: 10%;
   background-color: rgba(255, 255, 255, 0.95);
   top: 0;
 }
 .content {
   position: fixed;
   height: 84%;
   width: 100%;
   top: 10%;
   padding: 2%;
 }
 .footer {
   position: fixed;
   z-index: 2;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 6%;
   background-color: #263238;
 }

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <section class="container">

    <section class="header"></section>



    <section class="content">

      <div class="index_news">
        aaa
      </div>

      <div class="index_top">
        ccc
      </div>

    </section>

    <section class="footer"></section>

  </section>

</body>

</html>

CONTENT类的部分应该在HEADER和FOOTER之间准确，但在页面上它应该更大。你知道为什么吗？

Answer 1

width为100％，padding为2％。因此内容div的总宽度为104％。

将宽度更改为96％将修复它。

以下是更新的css。

.content {
    position: fixed;
    height: 84%;
    width: 96%;
    top: 10%;
    padding: 2%;
}

Answer 2

使用border-box值进行大小调整，这样填充不会影响外部宽度，而是相对于边框。此外，您的页脚位于底部fixed，这会产生内容不适合中间的错觉，但如果您删除height: 84%;，则内容div大小合适，否则它将是占据容器高度的84％。

.content {
       position: fixed;
       height: 84%;
       width: 100%;
       top: 10%;
       padding: 2%;



      /*  box sizing - brower compatible   */
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
     }

代码段：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300&subset=latin,latin-ext);
 body {
   background-image: url("img/background.jpg");
   background-size: 100% auto;
   background-repeat: no-repeat;
   margin: 0;
   height: 100%;
   width: 100%;
 }
 .container {
   width: 100%;
   height: 100%;
 }
 .header {
   display: table;
   width: 100%;
   position: fixed;
   height: 10%;
   background-color: rgba(255, 255, 255, 0.95);
   top: 0;
 }
 .content {
   position: fixed;
   height: 84%;
   width: 100%;
   top: 10%;
   padding: 2%;
   


  /*  use the border box for the box sizing, in this way the padding will not affect the outer width, instead it will be relative to the border    */
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
 .footer {
   position: fixed;
   z-index: 2;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 6%;
   background-color: #263238;
 }

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

  <section class="container">

    <section class="header"></section>



    <section class="content">

      <div class="index_news">
        aaa
      </div>

      <div class="index_top">
        ccc
      </div>

    </section>

    <section class="footer"></section>

  </section>

</body>

</html>

CSS百分比不准确

2 个答案: