导航栏上的填充使其从页面溢出，带有边距/填充的内部容器也不起作用答案

【问题标题】：Padding on navbar making it overflow from page, inner container with margin/padding doesn't work either导航栏上的填充使其从页面溢出，带有边距/填充的内部容器也不起作用
【发布时间】：2016-06-24 12:24:14
【问题描述】：

所以我正在从头开始制作一个新网站，但我已经卡在导航栏上了。我有这个简单的 HTML：

<div class="navbar">
  <div class="page-title">SkillUp</div>
</div>

<div class="container">

  <!-- PAGE CONTENT INJECTED HERE -->
  <div ng-view></div>

</div>

我的 CSS 是：

html, body{
  margin: 0;
  padding: 0;
}

.navbar{
  position: fixed;
  top: 0;
  left: 0;
  background-color: #197719;
  width: 100%;
  height: 80px;
  z-index: 100;
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.4);
  padding: 0 15px;
}

.page-title{
  position: relative;
  top: 2px;
  color: white;
  font-family: Lobster, cursive;
  font-size: 54px;
  text-shadow: -3px 3px 5px rgba(0, 0, 0, 0.6);
  text-align: center;
}

简单。但是，当添加填充时，导航栏会以填充时间 2 的大小水平延伸超过页面。我已经尝试了所有方法，从将 body 和 html 宽度设置为 100%，到在导航栏中放置另一个 div 并设置其宽度到 100% 并为其添加填充，但这也会使外部导航栏更大！它仅在我从导航栏中删除填充时才有效，但我制作的其他网站没有这个问题！我不想在内部元素中添加边距以使其正常工作。

这是发生了什么的图片：

Annoying navbar

请帮忙！谢谢！

【问题讨论】：

尝试删除 width: 100% 并改用 top:0; left:0; right:0，这样导航栏将自行扩展以适应 100%
@shall 这也有效！那么你们认为这样做更好，还是 box-sizing:border-box; 更好？在兼容性或其他方面。
我相信没有区别，box-sizing完全兼容，检查一下here

标签： html css

【解决方案1】：

添加

box-sizing: border-box;

到 .navbar 选择器。

【讨论】：

不知道这个技巧。我会在全宽容器中嵌套一个 flexbox... 不错的一个
@GolezTrol 没有人，用你的解决方案，标题不会占用所有空间......
我爱你。但这可能会导致旧浏览器出现问题吗？