Question

我已将页眉和页脚宽度设置为100％，但不知何故标题比页面宽，使得滚动条显示在底部，内容和页脚匹配页面宽度，只有标题更宽可能因为我使用了媒体查询下拉列表菜单里面的标题。我的代码是

* {
 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是下拉菜单的类。

Answer 1

那是因为您在标题中加了padding。

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

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

标题比页面宽

1 个答案: