100vw DIV不显示全宽 [英] 100vw DIV not showing full width

问题描述

我正在尝试将灰色 div(id ='ex-home-bottom-container')移到此页面底部

I am trying to make the gray div(id='ex-home-bottom-container') toward the bottom of this page http://patrickbaker.biz/starter-d/ the width of the full page. Which means breaking it out of the container div. I've done this using the Firebug style editor in Firefox (it's not live on the site):

#ex-home-bottom-container {
  box-sizing: border-box;
  width: 100vw;
  left: calc(-50vw+50%);
}

That sort of thing has worked in the past but it's not this time. The div is showing as full width but the left is constrained by the parent DIV. Which it shouldn't be. Any suggestions?

解决方案

1. Remove overflow: hidden from .site-inner which is hiding your extending space of ex-home-bottom-container
2. left property will not work unless position is specified. Use margin-left instead.

#ex-home-bottom-container {
  box-sizing: border-box;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

Output:

这篇关于100vw DIV不显示全宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！