Question

我正在尝试使导航div的顶部边框覆盖整个屏幕，但它无法正常工作。

＆＃13;

body {
  line-height: 1; 
  width: 1020px;
  font-family: 'Droid Sans', sans-serif;
  margin: 0 auto; 
}

.nav {
  margin: 0 auto; 
  border-top: 6px solid #9FCC7F; 
  width: 100vw;
}

＆＃13;

<body>
  <div class="nav"></div><!-- Nav --> 
</body>

＆＃13;

很奇怪，视口功能不起作用？你介意看看吗？

再次感谢。

Answer 1

更改宽度：100vw到宽度100％，它应该可以工作

看看这个：Difference between Width:100% and width:100vw?

Answer 2

//current date
var cd = moment().format("YYYY-MM-DD");
//5 days into the future
var nd = moment(cd, "YYYY-MM-DD").add(5, 'days').format('YYYY-MM-DD');
//get all dates from today to 5 days into the future


var getDates = function(startDate, endDate) {
  var dates = [],
      currentDate = startDate,
      addDays = function(days) {
        var date = new Date(this.valueOf());
        date.setDate(date.getDate() + days);
        return date;
      };
  while (currentDate <= endDate) {
    dates.push(currentDate);
    currentDate = addDays.call(currentDate, 1);
  }
  return dates;
};

var dates = getDates(new Date(cd), new Date(nd));                                                                                                       
dates.forEach(function(date) {
 //format the date
 var ald = moment(date).format("YYYY-MM-DD");
  console.log(ald);
  console.log(date);
});

body {
  line-height: 1;
  font-family: 'Droid Sans', sans-serif;
  margin: 0 auto; 
}

.nav {
  margin: 0 auto; 
  border-top: 6px solid #9FCC7F;
}

Answer 3

可能是因为，您提到的机身宽度1020px超出了设备可以支持的分辨率，

点击此链接：http://www.w3schools.com/css/css_rwd_viewport.asp

因此，当固定宽度超出设备的最大分辨率时，视口无法正确渲染

将属性设置为

body{
 width:100%; // for full page width
}

否则

离开宽度，浏览器会自动检测到它

Answer 4

移除宽度：身体1020px可以解决您的问题。

以下是https://jsfiddle.net/rahulxdd/wc5c0xk1/

的示例

    body {
          width: 100%;
         }

Answer 5

我为你添加了代码：最好使用width:100%，因为它会在响应式视口中自动调整。 px没有适应

1020px仅适用于具有mobile,tab模式的桌面模式.witch，它没有用。所以只提示100%

不要忘记添加视口标记 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 它是一个带视口的自动调整。

See Reference

body {
  width: 100%;
  font-family: 'Droid Sans', sans-serif;
  }

.nav {
  position:absolute;
  left:0;
  top:0;
  margin:0;
  padding:0;
  border-top: 6px solid #9FCC7F; 
  width: 100%;
}

<body>
  <div class="nav"></div><!-- Nav --> 
</body>

当body设置为1020px时，视口不工作

5 个答案: