html设置超出宽度不显示器,CSS-如何从div溢出到屏幕的全宽度-CSDN博客

12345678_0001

最明显的解决方案就是关闭容器.让您的全宽度div然后打开一个新的容器。标题“容器”只是一个类.不是它所包含的绝对要求一切都同时发生.在本例中，您将背景色应用于全宽度div，而不是需要若要将颜色应用于内部的、受限的div，请执行以下操作。* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}.container { max-width: 80%; border: 1px solid red; margin: 0 auto;}.fullwidth { background: orange;}header { height: 50px; background: #663399;}.mydiv { /* background: orange; */ min-height: 50px;}footer { height: 50px; background: #bada55;}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.

支持vw是IE9+-见http://caniuse.com/#feat=viewport-units在某些情况下，在100%宽的div中需要实际的内容，并且容器不能随意打开/关闭(也许是为了对滑块进行改造)。在这种情况下，新的div的高度是已知的。同样的技术也可以用于将其定位为100%视口宽：* { margin: 0; padding: 0;}body { overflow-x: hidden;}.container { max-width: 80%; border: 1px solid red; margin: 0 auto;}header { height: 50px; background: #663399;}.mydiv { height: 100px; position: relative;}.myslider { position: absolute; height: 100%; top: 0; left: 50%; transform: translateX(-50%); width: 100vw; background: orange;}footer { height: 50px; background: #bada55;}

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.

JSfiddle演示注：在某些情况下100vw可能导致溢出，可能会出现水平滚动条。overflow-x:hidden在这不应该是个问题，因为其他的东西都还在容器里。