使用jQuery使子DIV大于父DIV
[英]Make child DIV larger than parent DIV with jQuery
问题描述
I want to make the Child Div of a fix width Parent 100% width, like so: 
我想将固定宽度的子级Div设为父级100％的宽度，如下所示：
I am aware that there are multiple questions about this, unfortunately none answer the underlining issue of content not displaying properly underneath the child DIV. 我知道有很多问题，很遗憾，没有一个问题能回答在子DIV下方无法正确显示内容的问题。
I know that with CSS this is partially achievable: 我知道使用CSS可以部分实现：
.child-div {
position: absolute;
left: 0;
right: 0;
}
.parent-div {
position: static;
max-width: 900px;
}
I am working within a CMS which means I can't tailor the HTML to open and close the wrapper either which would be the correct solution to this of course. 我正在CMS中工作，这意味着我也不能定制HTML来打开和关闭包装器，这当然是正确的解决方案。 But I know there are people out there that would need to do it this way too for many other reasons. 但是我知道外面还有很多人出于其他许多原因也需要这样做。
The other problem is that by using this method, all the content underneath the Child shows up behind the .child-div , it doesn't sit underneath. 另一个问题是，通过使用此方法，Child下方的所有内容都显示在.child-div后面，而不位于其下方。 I understand that this because by making it absolute it no longer sits in the flow of the content. 我了解这一点，因为通过将其设为绝对值，它不再位于内容流中。
I understand why this wont work, but is there a solution using jQuery or Javascript instead? 我知道为什么这行不通，但是有使用jQuery或Javascript的解决方案吗？
4 个解决方案
解决方案1
1 已采纳 2015-03-24 10:38:40
It is possible to solve this problem with just using CSS and without position absolute (if you don't care about IE8 support ). 仅使用CSS而不使用绝对位置是可以解决此问题的（如果您不关心IE8支持 ）。
Your CSS should look like this: 您的CSS应该如下所示：
.child-div {
left: 0;
right: 0;
border: 1px solid blue;
height: 100px;
}
.parent-div {
position: static;
max-width: 900px;
border: 1px solid black;
height: 300px;
margin: 0 auto;
}
@media (min-width: 900px) {
.child-div {
/* 450px is 900px/2 and 50vw is 50% of the viewport */
margin: 0 calc(450px - 50vw);
}
}
You basically us the power of negative margins and the calc() "function" and since you're not using position absolute, you have all your problems solved. 您基本上可以利用负边距和calc() “函数”的功能，并且由于您没有使用绝对位置，因此可以解决所有问题。
http://jsfiddle.net/wfverf6d/1/ http://jsfiddle.net/wfverf6d/1/
解决方案2
0 2015-03-24 10:30:35
*{margin:0 ;padding: 0} .parent{width:960px; margin:0 auto;height: 750px; border: 1px solid black; } .child{position: absolute;top:0;width: 100%; margin-top: 100px; border: 1px solid red;height: 100px;background-color: #fff;}
<div class="parent"> <div class="child"></div> </div>
Try to avoid using position, unless it is required. 除非必要，否则尽量避免使用位置。 I made this mark up based on the wireframe you given. 我根据给定的线框进行了标记。
解决方案3
0 2015-03-24 10:33:41
.container { position : absolute; top : 0; bottom : 0; left : 25%; right : 25%; border : solid 2px black; border-radius : 2px; } .contained { border : solid 2px blue; border-radius : 2px; position : fixed; /* here is the trick */ top : 10%; left : 0; right : 0; height : 100px; }
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="utf-8" /> </head> <body> <div class="container"> <div class="contained"> </div> </div> </body> </html>
Use position : fixed to reach your goal. 使用position : fixed可达成您的目标。 When using absolute in a div you already used absolute , it will only stuck to the corner of the container div. 当使用absolute的div你已经使用absolute ，那就只能贴附在容器div的角落。 fixed works with entire viewport. fixed可用于整个视口。
解决方案4
0 2015-03-24 10:37:23
This is how I would do it : 这就是我要做的：
Assuming this markup : 假设这个标记：
<div class="parent">
[content before]
<div class="child"></div>
[content after]
</div>
Here is the CSS : 这是CSS：
// for decorative purpose
div{min-height:100px;padding:50px 0;}
.parent {
width:900px; margin:0 auto; // parent width (in px or %) and centering
background-color:grey;
}
.child {
background-color:blue;
}
@media (min-width: 900px) {
.child {
position:relative; left:50%; // centered position
width:100vw; // set width to 100% of the view port width
margin-left:-50vw;// margin left of 50% of the viewport width
}
}
JSFiddle : https://jsfiddle.net/whytk3xt/4/ JSFiddle： https ://jsfiddle.net/whytk3xt/4/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.