我的网页中的Div不会超过100％的页面宽度

Question

正如你所看到的，我的页眉和页脚不会跨越整个页面，不像我在中心的行......如果需要，我的样式表（用红色表示）就是这样。

   html,body{
     height:100%;
     width:100%;
     margin: 0px;
     padding: 0px;

   }

   #blogheader{

      background-color: green;
      height: 57%;
      margin: 0px;


   }

非常感谢任何帮助！我现在已经坚持了大约一个小时。我不知道为什么会这样。我正在使用bootstrap。但我唯一的行/组合是在三个图标所在的中心。

Answer 1

你提到你正在使用Bootstrap。

我可以重现这个错误，因为这个错误似乎是因为.row封装器中没有这个博客。

Codepen Demo

没有.row 查看@ fullscreen

＆＃13;

＆＃13;

  html,
  body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  .container-fluid {
    height: 100%;
  }
  #blogheader {
    background-color: green;
    height: 50px;
    margin: 0px;
  }
  .col-sm-4 {
    height: 50px;
    background: pink;
    border: 1px solid grey;
  }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">

  <div id="blogheader"></div>

  <div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

使用.row 查看@ fullscreen

＆＃13;

＆＃13;

  html,
  body {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
  }
  
  .container-fluid {
    height: 100%;
  }
  
  #blogheader {
    background-color: green;
    height: 50px;
    margin: 0px;
  }

.col-sm-4 {
  height: 50px;
  background: pink;
  border:1px solid grey;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
    <div class="row">
        <div id="blogheader"></div>
     </div>
  <div class="row">
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
    <div class="col-sm-4"></div>
  </div>
 </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试：

html, body {
    height:100px;
    width:100vw;
    margin: 0px;
    padding: 0px;
}