Header 比页面宽

Question

我已将我的 header 和页脚宽度设置为 100%，但不知何故 header 比页面宽，使滚动条出现在底部，内容和页脚匹配页面宽度，只有 header 更宽，可能是因为我在 header 中使用了媒体查询作为下拉菜单。我的密码是

* {
 margin: 0px;
 padding: 0px;
 font-family: Arial, Helvetica, Sans-serif;
 font-size: 12px;
 background-color: #EDEDED;
 }

.headerMenu{
 width: 100%;
 padding: 30px;
 background-color:#BF3B3D;
 }
 #wrapper {
 width:100%;
 background-color:#BF3B3D;
 }

 .logo img {
  position: absolute;
  top:0;
  float:left;
  background-image: url(../img/menu_bg.gif);
  width: 110px;
  height: 58px;
  }
 .search_box {
  top: 7px;
  float:left;
  color: #198C9E;
  background-color:#BF3B3D;
  position: absolute;
  margin-left: 155px;
  } 

 @media screen and (max-width: 1280px) {
 .dd {
   background-color:#BF3B3D;
   position: absolute;
   right:0px;
   top:0;
   margin-right: 4%;
   }  
   }

  @media screen and (min-width: 1280px) {
  .dd {
    background-color:#BF3B3D;
    position: absolute;
    right:0px;
    top:0;
    margin-right: 10%;
    }  
    }
    @media screen and (min-width: 1920px) {
    .dd {
       background-color:#BF3B3D;
       position: absolute;
       right:0px;
       top:0;
       margin-right: 25%;
       }
       }

这里的dd是class下拉菜单。

Answer 1

那是因为您正在将 padding 应用到您的 header。

要更改该行为，请使用 box-sizing 属性。

.headerMenu{
  background-color:#BF3B3D;
  box-sizing: border-box;
  padding: 30px;
  width: 100%;
}

Header 比页面宽

Header wider than page

html

css

header