当前位置: 首页 > 面试题库 >

溢出:隐藏在div和body上,行为不同

邵浩大
2023-03-14
问题内容

鉴于此html:

<body>
  <div id="a"></div>
  <div id="b"></div>
</body>

我要#b填充其容器块的所有剩余垂直空间,我从这里开始:

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

#a {
  height: 100px;
  width: 100px;
}

#b {
  height: 100%;
  width: 100%;
}

#b100%的高度也是如此,这意味着它正在采用其父容器块的高度500px,即问题是overflow: hidden;似乎没有起作用,#b未被裁剪。

另一方面,如果我换行#a#b使用另一个具有与上述相同属性的div,则将body得到所需的结果:

#wrap {
  height: 500px;
  width: 500px;
  overflow: hidden;
}

#a {
  height: 100px;
  width: 100px;
}

#b {
  height: 100%;
  width: 100%;
}

与此HTML当然:

<body>
<div id="wrap">
<div id="a"></div>
<div id="b"></div>
</div>
</body>

我的问题是为什么div并且body似乎具有相同属性的不同行为?没有包装,有没有办法获得相同的效果?

具有相同属性的两个jsFiddles产生不同的结果。这是为什么?


问题答案:

overflow属性具有某些特定于HTMLhtmlbody元素的特殊行为,这些行为在CSS2.1规范中进行了描述。这些特殊情况适用于在正常情况下在整个页面上更改溢出设置的情况,因此作者只需要在html或上设置它body,而不是在两者上都设置。

在这种情况下,当您应用overflow:hidden到时body,它实际上会影响视口,而不是影响视口body(您可以通过调整预览窗格的大小以使其更短来看到它-滚动条不会出现在预览窗格本身上)。这会导致#b正常溢出的身体,即使你给它一个固定的高度使用小于的总和#a#b。换句话说,就好像您从未将它放在身体上一样。

但是,如果您将设置overflowvisibleon
以外的其他html值,则会导致视口使用给html而不是提供的值body,从而使声明保持body不受影响,并使其行为与包装器相同:

html {
  overflow: auto;
}

body {
  height: 500px;
  width: 500px;
  overflow: hidden;
}


 类似资料:
  • 昨天我检查了一个突出的产品幻灯片,我在一个网页的首页是不是属性垂直对齐只在火狐,它在IE和Chrome工作正常。 我在搜索信息,很多年前我在FF上发现了很多bug。我尝试了一些我找到的解决方案,但没有一个有效。 在chrome和IE上,div位于窗口的中心,而在firefox中,该功能会向右对齐,使窗口大于100%。 幻灯片基于:http://wordpress.org/extend/plugin

  • 我的代码大师们。 我想让我的头球转向中心。我想要剪辑溢出:隐藏,但当我调整屏幕的纵向它剪辑图像的右侧,当它的风景它剪辑底部。我想让它同样夹住顶部、右侧、底部和左侧。 真实的图像要复杂得多,只是用这个作为例子。 像TransformOrigin:center这样的东西会非常好,但在这种情况下不起作用。 我耍了个笔头把戏 提前感谢!

  • 问题内容: 我有一些HTML表格,其中文本数据太大而无法容纳。因此,它可以垂直扩展单元格以适应此情况。因此,现在发生溢出的行的高度是数据量较小的行的两倍。这是无法接受的。如何强制表格具有相同的行高? 这是一些重现该问题的标记。表格仅应为一行的高度,并隐藏溢出的文字。 问题答案: 需要在单元格上和单元格上指定两个属性。您还需要将移至单元格

  • 问题内容: 我需要显示大于其父元素的子元素,但不删除overflow:hidden;。这可能吗?parent元素的 子元素一旦脱离父边界,就会被剥离。 (元素定义了其他的css,我只是为了清楚起见放置了样式属性) 问题答案: 这是完全不可能做到你想要什么都和父..相反,你可以引入额外的儿童并移动到这一点。 HTML: CSS:

  • 问题内容: 我们有两个DIV,一个嵌入另一个。如果外部DIV的位置不是绝对的,则内部DIV的位置绝对是不遵守外部DIV所隐藏的溢出的。 是否有机会使内部DIV服从外部DIV的隐藏溢出,而无需将外部DIV设置为绝对位置(因为这会破坏我们的完整布局)?相对于内部DIV的相对位置也不是一种选择,因为我们需要“增长”到表TD(exmple)。 还有其他选择吗? 问题答案: 制作外,以和内到。它应该为您工作

  • 问题内容: 我有一个表格单元格,我一直希望成为一个特定的宽度。但是,它不适用于较大的无间距文本字符串。这是一个测试用例: 如何使文本在框的边缘处被切除,而不是使框展开? 问题答案: 需要设置 和 表元件上的合适的宽度,以及和在桌子上的细胞。 例子 定宽列 表格的宽度必须与固定宽度的单元格相同(或更小)。 使用一个固定宽度的列: 使用多个固定宽度的列: 固定和流体宽度色谱柱 必须设置 表格的宽度,但