时间戳

首页 > 解决方案 > 内部 div 变得大于外部并超出浏览器边框，填充右侧不起作用

html - 内部 div 变得大于外部并超出浏览器边框，填充右侧不起作用

问题描述

我有 2 个 div，父 div 是 100% 宽度，内部 75rem，所以如果你增加浏览器宽度，文本将保持在中心。喜欢这里：www.profimetall.de或www.pip-laser.de（导航栏）。

现在我想减小浏览器的宽度，并给两个 div 一个 100% 的宽度，但内部应该在外部之间有一个间隙。左侧不是问题，而是右侧。当我减小浏览器宽度时，div 变宽并且底部的滚动条弹出。

HTML：

<div class="outer">
 <div class="inner">
 </div>

CSS：

.outer {width: 100%; height: auto, position: relative;}
.inner {width: 75rem; height:300px; position: relative; margin: 0 auto;}

CSS：（最大宽度：80rem）

.inner {width: 100%; padding-right: 40px; padding-left: 40px;

媒体查询后应该是这样的：

https://i.stack.imgur.com/m6S8Z.png

灰色：外部 div 黄色：内部

标签： htmlcssoverflow

解决方案

有一些错别字：

height: auto,应该：height: auto;

显然最后一个 .inner 不见了}。

但是对于手头的问题，尝试添加box-sizing:border-box;到.inner. 这应该解释填充。

推荐阅读