padding 相关问题

我有一个具有以下结构的网站：成分我有一个具有以下结构的网站： <div class="main-outer"> <div class="main-inner"> <div class="test"> components </div> </div> </div> div 'test' 调用不同的组件。我正在尝试使其高度响应，这样如果组件具有“高度：100％”，它应该随着屏幕的增长而增长。但是，如果我在组件中设置最小高度，则滚动（来自 main-outer div）应该从该高度出现。我的问题是：当屏幕达到该最小高度时，我在'主内部类'中设置的填充底部（或边距）消失......我该如何解决这个问题？我这里有一个例子： https://jsfiddle.net/4o1j2zmn/1/ 编辑：我需要比“测试”的div更高的边距，因为当我调用许多组件时，我想让边距成为全局的我检查了你的代码，我认为“.main-outer”填充工作正常。这是“.main-inner”边距和“.test”类的固定高度的问题。我已将您的边距属性从“.main-inner”转移到“.test”类，并将“.test”高度设置为自动，以便它将根据内容进行调整，并显示距父容器外边缘的边距。请检查并尝试以下代码片段： .main-outer { padding: 0 50px; height:100vh; overflow-y: auto; overflow-x: hidden; background-color: blue; } .main-inner { height: 100%; box-sizing: border-box; } .test{ display: block; content: ''; height: auto; background-color: red; margin: 50px 0 50px 0; } <div class="main-outer"> <div class="main-inner"> <div class="test"> http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ </div> </div> </div> 对于任何在未来遇到这个问题的人来说，对我有用的修复方法是删除显式的 .main-inner 的 height: 100%;。注意：min-height: 100%;似乎也会导致同样的问题。 .main-outer { padding: 0 50px; height:100vh; overflow-y: auto; overflow-x: hidden; background-color: blue; } .main-inner { /* height: 100%; */ box-sizing: border-box; } .test{ display: block; content: ''; height: auto; background-color: red; margin: 50px 0 50px 0; } <div class="main-outer"> <div class="main-inner"> <div class="test"> http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ http://www.himanshu-joshi.com/ </div> </div> </div>

html css scroll height padding

回答 2 投票 0

应用默认 CSS 属性的浏览器

大家好这是我在这个平台上的第一个问题！目前我正在开发一个网站项目，我的 div 容器遇到一些问题。我已经在我的容器中插入了一个图像，我...

html css browser padding

回答 1 投票 0

C++ 编译器对齐 - 只有字符，没有填充

在 VC++ 上，为什么编译器仅在使用非 char 数据类型时填充结构？ IE。结构测试 { 字符a[7]； }; 结构体TEST2 { __int32a; 字符b[7]； }; 大小（测试）； // 返回 7 尺寸...

c++ visual-c++ padding memory-alignment

回答 1 投票 0

什么允许普通可复制类型具有填充位

查看了许多关于 C++ 中对象的低级操作的讨论（从字符数组创建，std::memcpy，...），我想知道它如何适用于具有填充位的类： #包括...