Je veux faire ma div intérieure 100% largeur du corps, pas 100% de la div parent. Est-ce possible?
La disposition ressemble à ceci:
<body>
<div> /** Width:900px; **/
<div> /** This I want 100% of BODY, not of parent div **/
</div>
</div>
</body>
j'espère que vous regardez comme ça ........... voir le D&EACUTE;MO
DEMO 2 MISE À JOUR SELON VOS BESOINS ACTUELS
CSS
.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.inner {
background:green;
height:100px;
position:absolute;
left:0;
right:0;
}
.child {
height:100px;
background:black;
margin:10px 0;
}
-------------* *
Deuxième réponse avec sans positionnement mais avec une astuce ce que j’ai utilisé ici, veuillez donc vérifier le code et la démo mentionnés ci-dessous: -
HTML
<body>
<div class="parent"> /** Width:900px; **/
<div class="child"></div>
</div>
<div class="inner"> /** This I want 100% of BODY, not of parent div **/</div>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
CSS
.parent {
background:red;
width:900px;
margin:0 auto;
padding:10px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.inner {
background:green;
height:100px;
}
.child {
height:100px;
background:black;
margin:10px 0;
}
vous pouvez utiliser les unités vh an vw
.parent {
width: 900px;
height: 400px;
background-color: red;
}
.child {
width: 100vw;
height: 200px;
background-color: blue;
}
<html>
<body>
<div class="parent">
<div class="child">
</div>
</div>
</body>
</html>
Le remplacement de min-width ( min-width: 100% ) a empêché le conteneur de grandir à la taille du contenu.
Détails: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset informe: "Contrairement à presque Tout autre élément, la spécification HTML WHATWG suggère min-width: min-content dans le style par défaut pour, et de nombreux navigateurs implémentent ce style (ou quelque chose de ce genre). cela s'en rapproche). "
Je pense que ce que vous demandez n'est pas possible. Au lieu de cela, vous devriez envisager de repenser votre mise en page. Je me retrouve souvent à faire des choses comme ça:
html:
<div id="top">
<div class="wrapper"></div>
</div>
<div id="content">
<div class="wrapper"></div>
</div>
<div id="footer">
<div class="wrapper"></div>
</div>
css:
#top {
background: red;
}
#content {
background: orange;
}
#footer {
background: yellow;
}
.wrapper {
width: 860px;
margin: 0 auto;
padding: 20px;
background: rgba(255, 255, 255, 0.2);
}
démo - http://jsfiddle.net/bxGH2/
Cela a fait le tour. Un script jQuery:
$(document).ready(function () {
var width = $(window).width();
$('.pane-block-8').attr('style', 'width:' + width + 'px; left:-26.5% !important;');
});
$(window).resize(function () {
var width = $(window).width();
$('.pane-block-8').attr('style', 'width:' + width + 'px; left:-26.5% !important;');
});
Pensez à changer votre layoiut en quelque chose comme ceci:
Ensuite, vous pouvez simplement appliquer les balises ID aux DIV auxquelles vous souhaitez appliquer des règles spécifiques.
<div class="outer">
<div class="inner">HEADER</div>
</div>
<div class="outer">
<div class="inner">CONTENT</div>
</div>
<div class="outer">
<div class="inner">FOOTER</div>
</div>
.outer {
width:100%;
background:#ccc;
}
.inner {
width:920px;
background:#999;
margin:0 auto 20px;
padding:20px;
}