为什么身体溢出无法正常工作? [英] why body overflow not working?

查看:118
本文介绍了为什么身体溢出无法正常工作?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

为什么 body overflow:hidden 在视口高度比css高度高时不起作用?

Why body overflow:hidden not working when viewport height is grater then css height?

ViewPort高度为> 700像素,并且

ViewPort height is >700px and

css高度为300px

css height is 300px

codepen http://codepen.io/vinaymavi/pen/aNMVYX

div{
  border: 1px dashed;
  height:55px;
}
body{
  padding:10px;
  width:100%;
  height:300px;
  border:2px solid red;
  overflow:hidden;
}

<html> 
  <body> 
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
  </body>
</html

输出

推荐答案

来自

UA必须将根元素上设置的"overflow"属性应用于 视口.当根元素是HTML"HTML"元素或XHTML时 "html"元素,并且该元素具有HTML"BODY"元素或 XHTML"body"元素作为子元素,用户代理必须改为应用 从第一个此类子元素到视口的溢出"属性, 如果根元素上的值是'visible'.

UAs must apply the 'overflow' property set on the root element to the viewport. When the root element is an HTML "HTML" element or an XHTML "html" element, and that element has an HTML "BODY" element or an XHTML "body" element as a child, user agents must instead apply the 'overflow' property from the first such child element to the viewport, if the value on the root element is 'visible'.

也就是说,设置在body元素上的overflow:hidden会移动以应用于视口.为避免发生这种情况,可以将<html>元素设置为不溢出:可见.

That is, overflow:hidden set on the body element, is moved to apply to the viewport instead. To avoid that happening, you can set the <html> element to not be overflow:visible.

即将html { overflow:auto; }添加到CSS.

这篇关于为什么身体溢出无法正常工作?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆