我的DOM上有一个固定高度的元素，其高度超过body，html文档和页面可滚动但影响我的内容。如果您在html或body上禁用overflow-x，它将正常工作。无法弄清楚overflow-x如何影响溢出条件。
根据下面的代码段，由于html或body上的oveflow-x属性，第二列的内容被隐藏了一半。
在页面上使用以下css。
body, html{
overflow-x: hidden;
height: 100%;
}
canvas {
background: #000;
display: block !important;
border: 0;
margin: 0;
width: 100% !important;
height: 100% !important;
padding: 0;
max-width: 100% !important;
max-height: 100% !important;
}
body, html{
height: 100%;
overflow-x: hidden;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="height:100%; margin: 0; padding: 0; ">
<div class="row">
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque iusto laboriosam perspiciatis praesentium. Aliquam at atque beatae blanditiis consequuntur delectus earum eius eveniet excepturi fuga fugit hic id illo laboriosam natus nobis non
omnis, pariatur praesentium quidem repudiandae sapiente ullam ut vel veritatis voluptas voluptatibus. A asperiores at consequatur culpa dolorem eaque eligendi exercitationem facere fuga fugiat fugit, hic in inventore iure minima necessitatibus
nisi non, numquam officiis praesentium quas quis reiciendis rerum voluptatibus voluptatum. Animi debitis eveniet maxime nostrum temporibus! Alias, aliquam amet animi at blanditiis consectetur corporis culpa dolor dolore doloremque ea earum exercitationem
facere harum, hic illo in itaque labore laborum libero natus nemo obcaecati optio quas rem repellendus vitae? At deleniti dignissimos id in magnam nisi nulla omnis, perferendis, quis reprehenderit sint, voluptatibus. Cum ducimus hic impedit magni
modi necessitatibus nihil quibusdam tenetur ullam vitae. Facilis illum inventore mollitia nihil non omnis reprehenderit unde? Accusantium animi aspernatur, dolorum, earum expedita illum iusto obcaecati, officia provident qui unde ut. Accusantium
aperiam at atque consequatur culpa deleniti dicta dolorum explicabo fuga fugiat, hic id laborum minus molestiae nobis pariatur repellat rerum saepe sed sint soluta temporibus voluptates voluptatum. Ab, possimus, soluta. A accusantium asperiores
cumque cupiditate deleniti deserunt distinctio dolor ducimus ea eius eos id iure labore laboriosam laborum, magnam magni molestiae non nostrum officia quia quibusdam quidem suscipit ut vel velit veritatis vitae? Facere facilis laboriosam optio
perspiciatis quidem quod reprehenderit similique, sunt tempora voluptas. Ad animi cupiditate deleniti dolore dolorem earum est harum itaque iusto laborum magnam nostrum numquam odit provident quod quos, ratione recusandae saepe sequi similique
tenetur totam ullam. Commodi ipsum nisi obcaecati porro praesentium. Accusantium ad adipisci alias asperiores, aspernatur consequatur consequuntur deserunt dicta dignissimos dolore dolorem doloremque, error eveniet fugiat laboriosam laborum magnam,
molestiae optio pariatur quis quo rem sint voluptatem?
</div>
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores minima natus nostrum numquam odit quaerat, ratione sed sit. Architecto, aspernatur autem dolor doloribus eveniet explicabo perspiciatis quam quidem quos! At blanditiis consequatur consequuntur
deleniti dignissimos dolorem dolorum eius explicabo fugiat illo in ipsa necessitatibus nostrum omnis quis quisquam quod quos ratione repellat sed sint temporibus, voluptates. Amet, animi architecto aut, deleniti deserunt dolores et expedita iusto
libero magnam magni, perspiciatis possimus quos recusandae repudiandae sapiente sit voluptatem. Accusamus aliquam architecto asperiores aut, delectus deleniti eaque eum fugit harum incidunt maxime molestiae quidem quod voluptatem voluptates. Accusamus
alias aliquam amet architecto assumenda atque commodi cumque deserunt dicta ducimus, esse harum ipsum itaque iusto labore laboriosam magnam magni maiores minus neque nisi officiis, omnis optio possimus provident quaerat quam quasi quo recusandae
reiciendis repellat sapiente sequi sunt tenetur vel voluptates voluptatum! A adipisci, assumenda aut cumque dicta doloribus eos ex harum iste magni minus mollitia odit officiis repudiandae similique ullam ut velit voluptate. Amet architecto id
nobis similique! Amet atque deleniti magnam quam quisquam, unde vel veritatis? Commodi laborum, maiores minus molestiae placeat quaerat sequi vero. Ab accusantium autem consequuntur deleniti dicta doloribus et facilis harum impedit in, incidunt
nam neque, nobis nostrum numquam quam quasi quia soluta, voluptate voluptates? Accusamus aut magnam minima officia voluptatum? A ab aliquam aut beatae consequatur debitis dignissimos dolor doloribus eaque earum eius enim eos exercitationem expedita
hic inventore ipsum itaque maxime nisi non obcaecati officia officiis perferendis praesentium quas repellat repellendus, similique unde, vel voluptate? Accusantium aliquam aliquid assumenda atque aut beatae debitis dicta, dolores doloribus ducimus
earum, eligendi exercitationem id impedit inventore laborum laudantium libero minima minus molestias nemo nostrum numquam obcaecati odit officia praesentium quasi quis reiciendis repellendus reprehenderit, rerum similique soluta temporibus? Ad
architecto aspernatur assumenda consectetur cupiditate debitis dolores doloribus enim error excepturi explicabo facere facilis fugiat id, illo ipsum laboriosam odio, porro quae quaerat quam quas quasi quisquam quod sint ut voluptatem? Animi architecto
cupiditate debitis dicta doloribus dolorum eaque earum eum expedita, fugiat harum illo iusto laboriosam laborum minima, molestiae natus pariatur perferendis perspiciatis praesentium quia quidem reiciendis reprehenderit sequi soluta suscipit tempora
vero? Ducimus exercitationem expedita explicabo facilis fugiat in ipsam iste iusto laudantium magnam natus optio, quod ratione rem, sed. Aspernatur assumenda facere libero obcaecati officiis pariatur provident quam quos repudiandae! Eveniet provident,
quo. Ab aliquid amet animi commodi corporis, cupiditate debitis dolor doloremque est ex fugiat id illum ipsam ipsum iste iure iusto laboriosam modi molestiae mollitia nam nisi nostrum nulla omnis placeat praesentium quas quia quibusdam quo quod
quos ratione repellat, sit tempora tempore veritatis voluptates. Ab accusantium aperiam, asperiores aut beatae cumque cupiditate delectus dolore eaque enim, libero minima, nemo nesciunt nulla qui quis ratione rem reprehenderit sapiente sed tempora
temporibus ut. Delectus, laudantium nam necessitatibus non pariatur quae. Aut culpa debitis explicabo facilis ipsam nam rem repellendus. Adipisci aliquam aut autem debitis deserunt distinctio dolore ducimus eaque expedita in ipsum libero nesciunt,
odit, officia perspiciatis, ratione recusandae reiciendis rem tempore temporibus totam voluptas.
</div>
</div>
<div>
<div style="z-index: 2147483642; top: 0px; left: 0px; position: absolute; opacity: 0.3;
width: 100vw; height: 10351px; display: block;">
<canvas width="100vw" height="10351" style="position: absolute; top: 0px; left: 0px; z-index: 1000000;"></canvas>
</div>
</div>
</div>
</body>
</html>
注意：我正在寻找这个问题的解释（为什么会这样，以便我可以学习将来）而不是问题的解决方案。 （通过命中和试用不同的css字段）。
答案 0 :(得分：1)
我认为没有必要将overflow-x: hidden提供给html，请查看代码。
canvas {
background: #000;
display: block !important;
border: 0;
margin: 0;
width: 100% !important;
height: 100% !important;
padding: 0;
max-width: 100% !important;
max-height: 100% !important;
}
body{
height: 100%;
overflow-x: hidden;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="height:100%; margin: 0; padding: 0; ">
<div class="row">
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus atque iusto laboriosam perspiciatis praesentium. Aliquam at atque beatae blanditiis consequuntur delectus earum eius eveniet excepturi fuga fugit hic id illo laboriosam natus nobis non
omnis, pariatur praesentium quidem repudiandae sapiente ullam ut vel veritatis voluptas voluptatibus. A asperiores at consequatur culpa dolorem eaque eligendi exercitationem facere fuga fugiat fugit, hic in inventore iure minima necessitatibus
nisi non, numquam officiis praesentium quas quis reiciendis rerum voluptatibus voluptatum. Animi debitis eveniet maxime nostrum temporibus! Alias, aliquam amet animi at blanditiis consectetur corporis culpa dolor dolore doloremque ea earum exercitationem
facere harum, hic illo in itaque labore laborum libero natus nemo obcaecati optio quas rem repellendus vitae? At deleniti dignissimos id in magnam nisi nulla omnis, perferendis, quis reprehenderit sint, voluptatibus. Cum ducimus hic impedit magni
modi necessitatibus nihil quibusdam tenetur ullam vitae. Facilis illum inventore mollitia nihil non omnis reprehenderit unde? Accusantium animi aspernatur, dolorum, earum expedita illum iusto obcaecati, officia provident qui unde ut. Accusantium
aperiam at atque consequatur culpa deleniti dicta dolorum explicabo fuga fugiat, hic id laborum minus molestiae nobis pariatur repellat rerum saepe sed sint soluta temporibus voluptates voluptatum. Ab, possimus, soluta. A accusantium asperiores
cumque cupiditate deleniti deserunt distinctio dolor ducimus ea eius eos id iure labore laboriosam laborum, magnam magni molestiae non nostrum officia quia quibusdam quidem suscipit ut vel velit veritatis vitae? Facere facilis laboriosam optio
perspiciatis quidem quod reprehenderit similique, sunt tempora voluptas. Ad animi cupiditate deleniti dolore dolorem earum est harum itaque iusto laborum magnam nostrum numquam odit provident quod quos, ratione recusandae saepe sequi similique
tenetur totam ullam. Commodi ipsum nisi obcaecati porro praesentium. Accusantium ad adipisci alias asperiores, aspernatur consequatur consequuntur deserunt dicta dignissimos dolore dolorem doloremque, error eveniet fugiat laboriosam laborum magnam,
molestiae optio pariatur quis quo rem sint voluptatem?
</div>
<div class="col col-xs-6">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores minima natus nostrum numquam odit quaerat, ratione sed sit. Architecto, aspernatur autem dolor doloribus eveniet explicabo perspiciatis quam quidem quos! At blanditiis consequatur consequuntur
deleniti dignissimos dolorem dolorum eius explicabo fugiat illo in ipsa necessitatibus nostrum omnis quis quisquam quod quos ratione repellat sed sint temporibus, voluptates. Amet, animi architecto aut, deleniti deserunt dolores et expedita iusto
libero magnam magni, perspiciatis possimus quos recusandae repudiandae sapiente sit voluptatem. Accusamus aliquam architecto asperiores aut, delectus deleniti eaque eum fugit harum incidunt maxime molestiae quidem quod voluptatem voluptates. Accusamus
alias aliquam amet architecto assumenda atque commodi cumque deserunt dicta ducimus, esse harum ipsum itaque iusto labore laboriosam magnam magni maiores minus neque nisi officiis, omnis optio possimus provident quaerat quam quasi quo recusandae
reiciendis repellat sapiente sequi sunt tenetur vel voluptates voluptatum! A adipisci, assumenda aut cumque dicta doloribus eos ex harum iste magni minus mollitia odit officiis repudiandae similique ullam ut velit voluptate. Amet architecto id
nobis similique! Amet atque deleniti magnam quam quisquam, unde vel veritatis? Commodi laborum, maiores minus molestiae placeat quaerat sequi vero. Ab accusantium autem consequuntur deleniti dicta doloribus et facilis harum impedit in, incidunt
nam neque, nobis nostrum numquam quam quasi quia soluta, voluptate voluptates? Accusamus aut magnam minima officia voluptatum? A ab aliquam aut beatae consequatur debitis dignissimos dolor doloribus eaque earum eius enim eos exercitationem expedita
hic inventore ipsum itaque maxime nisi non obcaecati officia officiis perferendis praesentium quas repellat repellendus, similique unde, vel voluptate? Accusantium aliquam aliquid assumenda atque aut beatae debitis dicta, dolores doloribus ducimus
earum, eligendi exercitationem id impedit inventore laborum laudantium libero minima minus molestias nemo nostrum numquam obcaecati odit officia praesentium quasi quis reiciendis repellendus reprehenderit, rerum similique soluta temporibus? Ad
architecto aspernatur assumenda consectetur cupiditate debitis dolores doloribus enim error excepturi explicabo facere facilis fugiat id, illo ipsum laboriosam odio, porro quae quaerat quam quas quasi quisquam quod sint ut voluptatem? Animi architecto
cupiditate debitis dicta doloribus dolorum eaque earum eum expedita, fugiat harum illo iusto laboriosam laborum minima, molestiae natus pariatur perferendis perspiciatis praesentium quia quidem reiciendis reprehenderit sequi soluta suscipit tempora
vero? Ducimus exercitationem expedita explicabo facilis fugiat in ipsam iste iusto laudantium magnam natus optio, quod ratione rem, sed. Aspernatur assumenda facere libero obcaecati officiis pariatur provident quam quos repudiandae! Eveniet provident,
quo. Ab aliquid amet animi commodi corporis, cupiditate debitis dolor doloremque est ex fugiat id illum ipsam ipsum iste iure iusto laboriosam modi molestiae mollitia nam nisi nostrum nulla omnis placeat praesentium quas quia quibusdam quo quod
quos ratione repellat, sit tempora tempore veritatis voluptates. Ab accusantium aperiam, asperiores aut beatae cumque cupiditate delectus dolore eaque enim, libero minima, nemo nesciunt nulla qui quis ratione rem reprehenderit sapiente sed tempora
temporibus ut. Delectus, laudantium nam necessitatibus non pariatur quae. Aut culpa debitis explicabo facilis ipsam nam rem repellendus. Adipisci aliquam aut autem debitis deserunt distinctio dolore ducimus eaque expedita in ipsum libero nesciunt,
odit, officia perspiciatis, ratione recusandae reiciendis rem tempore temporibus totam voluptas.
</div>
</div>
<div>
<div style="z-index: 2147483642; top: 0px; left: 0px; position: absolute; opacity: 0.3;
width: 100vw; height: 10351px; display: block;">
<canvas width="100vw" height="10351" style="position: absolute; top: 0px; left: 0px; z-index: 1000000;"></canvas>
</div>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
每当使用css height设置html和body元素的高度时：100％;属性，它会告诉浏览器，＆＃34;好的，只需将body元素的高度作为（浏览器的）视口高度！＆＃34;。您可以使用Chrome的检查元素工具清楚地看到它，并使用浏览器窗口高度进行播放。每次调整浏览器的窗口高度时，body元素的像素高度都会相应变化。
overflow-x：hidden;在body和html标签上不是问题。基本上，overflow-x：hidden;属性将隐藏超出父元素宽度而不是水平方式的垂直内容。在这种情况下，无论内容超出正文的垂直宽度或html都不会显示。
实际问题是，我猜，身高：100％; body和html标签的属性。考虑将其删除，如下所示。
html, body {
/*height: 100%;*/
overflow-x: hidden;
}
我想这会保护你。