Css 响应式布局和限制/陷阱内容

我正试图弄明白如何在CSS的帮助下管理以下内容

我希望主网站框架能够限制/陷阱内的所有内容。Sicne我还没有编码任何东西我会给你看一张图

正如您在上面的示例中所看到的，红色框打破了网站边框，而不是一个响应性布局，您现在有一个混乱的布局。。你基本上有一个固定的红框宽度，它不会改变，即使网站的其他部分是响应性的，会破坏整个东西

有没有可能把红色的盒子夹在灰色的盒子里？例如，通常使用div，而不必编辑可能有的所有红色框

---

谢谢大家!

尝试任何响应性的布局框架，如Bootstrap

粘性页脚的示例之一：

粘性导航栏和页脚的另一个示例：

JSFIDLE示例：

---

所有这些都可以根据您的实际HTML和CSS进行更改。。。可能是一些简单的例子，比如宽度：100%或更复杂的位置，这是我的例子的错误。我并不是说它是一个粘条或者只是网站中某个地方的一个随机对象。类似于这里的红色条：

html, body {
  height: 100%;
}

footer {
  position: absolute;
  bottom: 0;
}