[英]100% Browser Width Div Inside Smaller Div
I have a div of width: 1000px
and inside that is a child which I wish to span the entire width of the browser window. 我有一个div
width: 1000px
,里面是一个孩子,我希望它能跨越浏览器窗口的整个宽度。
The trouble is, I don't know how to override previous width inheritance. 问题是,我不知道如何覆盖以前的宽度继承。
I could just position this outside of my container div, but that would be a huge inconvenience and workaround, unless of course this is equally as troublesome. 我可以将其放置在我的容器div之外,但这将带来巨大的不便和解决方法,除非当然同样麻烦。
Markup: 标记:
<div class="centreContainer">
<div class="menuContainer"></div>
</div>
CSS: CSS:
html, body
{
margin: 0;
padding: 0;
}
.centreContainer
{
margin: auto;
width: 1000px;
}
.menuContainer
{
width: <what to do>;
height: 420px;
}
Preferably I would like a CSS only workaround, I was thinking of some stupid Javascript solution where you get the width of the browser window, then set the width of the menuContainer to: 最好是我只希望有一种CSS解决方案,我在想一些愚蠢的Javascript解决方案,在该解决方案中,您可以获取浏览器窗口的宽度,然后将menuContainer的宽度设置为:
<variable> / 10
(10 because 1000 / 100 = 10, where 1000 is the width of the centre container) <variable> / 10
(10,因为1000/100 = 10,其中1000是中心容器的宽度)
And have the menuContainer set on margin: auto;
并将menuContainer设置为
margin: auto;
so it is centered. 所以它居中。
Just use position
: 只需使用
position
:
.menuContainer
{
position: absolute;
width: 100%;
height: 420px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.