DIV extérieure ne s'étend pas à l'intérieur des DIVs
Je termine ma page à l'intérieur de l'un des principaux wrapper div
mais externe div
ne s'étend pas à l'intérieur de la div.
Je veux hauteur de la principale extérieure div main-wrapper
grandir avec le contenu de la page qui n'est pas le cas pour une raison quelconque
Je suis à essayer de comprendre ce problème pendant un certain temps, mais jusqu'à présent sans succès.
J'ai mis en place jsFiddle Exemple
Je voudrais de l'aide à cet égard.
HTML Structure de l'échantillon
<!-- main Container -->
<div class="main-wrapper">
<!-- Header -->
<div class="header-wrapper"></div>
<!-- Header -->
<div class="content-wrapper">
<!-- Content Page-->
<!-- banner image wrapper -->
<div class="top-image-wrapper"></div>
<!-- banner image wrapper -->
<!-- page content wrapper -->
<div id="page-content-area" class="page-content-area">
<div id="pg-intro-area" class="pg-intro-area">
<div class="page-title">
<h5>Page Title </h5>
</div>
<div class="page-text"></div>
</div>
<div class="pg-right-bar-wrapper"></div>
</div>
<!-- page content wrapper -->
<!-- Content Page-->
</div>
<div class="footer-wrapper"></div>
</div>
<!-- main Container -->
CSS Liées
html, body,form { height:100%; background-color:gray; }
body {
font-family: Verdana,"Trebuchet MS",Arial,sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 11px;
line-height: 16px;
height:100%; margin:0;padding:0; border:0;
color:#656565;
}
p
{
text-align:justify;
color:#687074;
}
hr
{
background-color: #ccc;
border: medium none;
height: 1px;
margin-bottom: 12px;
margin-top: 12px;
}
h5 /* for page title*/
{
font-size:15px;
color:#028F41;
margin:5px 0;
}
.page-title-lbl
{
font-size:15px;
color:#028F41;
padding-left:105px;
background-image:url("../images/title-bar.png");
background-repeat:no-repeat;
text-shadow:0 0 0px #F6F6F6;
}
img
{
border:0px
}
a {
color: #028F41;
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}
input {
border: 1px solid #ccc;
font-size: 12px;
height: 20px;
line-height:20px;
vertical-align:middle;
padding-left: 5px;
color:#656565;
}
.btn
{
background-color: #0A8F36;
border: 0 none;
color: #FFFFFF;
font-size: 12px;
font-weight:bold;
height: 24px;
line-height:24px;
}
.margin5-0
{
margin:5px 0;
}
.margin10-0
{
margin:10px 0;
}
.margin20-0
{
margin:20px 0;
}
.padding5-0
{
padding:10px 0;
}
.padding10-0
{
padding:10px 0;
}
.padding20-0
{
padding:20px 0;
}
.margin10-000
{
margin:10px 0 0 0;
}
.margin00-5-0
{
margin:0 0 5px 0;
}
.margin00-10-0
{
margin:0 0 10px 0;
}
.margin20-000
{
margin:20px 0 0 0;
}
.margin00-20-0
{
margin:0 0 20px 0;
}
.main-wrapper
{
width:1000px;
min-height: 100%;
height: auto !important;
height: 100%;
margin:0px auto 0px auto;
background-color:#fff;
padding-left:10px;
padding-right:10px;
}
.header-wrapper
{
height:130px;
background-color:red;
}
.search-sm-wrapper
{
float:right;
width:250px;
height:100px;
}
.search-wrapper
{
text-align:right;
width:250px;
height:25px;
}
.txtSearch
{
float: right;
height: 20px;
width: 150px;
border-right:0px;
}
.btn-search
{
float:right;
}
.language-wrapper
{
float:right;
text-align:right;
width:250px;
height:20px;
}
.language-link
{
color:#656565;
}
.sm-wrapper
{
float:right;
width:250px;
height:25px;
}
.menu-wrapper
{
height:30px;
width:1000px;
background-color:yellow;
}
.content-wrapper
{
float:left;
height:auto;
}
.footer-wrapper
{
float:left;
width:1000px;
}
.brand-logos
{
height:39px;
}
.marquee
{
float:left;
overflow:hidden;
height:39px;
width:1000px;
border:0px solid #f9f9f9;
}
.footer-banner
{
float:left;
height:96px;
width:1000px;
}
.footer-menu
{
display:none;
}
.footer-copyright
{
float:left;
height:20px;
width:1000px;
}
.top-image-wrapper
{
height:240px;
margin-top:6px;
background-color:#f5f5f5;
}
/* home page*/
.hp-intro-area
{
float:left;
width:570px;
margin-right:30px;
}
.hp-right-bar-wrapper
{
float:left;
width:400px;
}
.tabs-wrapper
{
margin:10px 0;
background-color:#E5E5E5;
height:210px;
overflow:hidden;
}
.tab-name-wrapper
{
width:400px;
height:30px;
line-height:30px;
background-color:#fff;
margin-bottom:10px;
overflow:hidden;
}
.tab-content-wrapper
{
margin:0px 10px;
}
.hp-tab-image
{
float:left;
width:100px;
padding-right:10px;
}
/* Page */
.page-content-area
{
width:100%;
height:100%;
}
.page-sub-menu
{
width:100%;
height:23px;
padding:0px 0px;
background-color:blue;
}
.pg-intro-area
{
float:left;
width:570px;
margin-right:30px;
}
.pg-right-bar-wrapper
{
float:left;
width:400px;
}
Le principal wrapper est de prendre toute la page?? jsfiddle.net/kevinPHPkevin/nbaxZ/1
Essayez de supprimer le height:100%; style sur les principaux wrapper. Aussi, éventuellement, retirer le même style sur le html/body/forme.
Essayez de supprimer le height:100%; style sur les principaux wrapper. Aussi, éventuellement, retirer le même style sur le html/body/forme.
OriginalL'auteur Learning | 2013-09-01
Vous devez vous connecter pour publier un commentaire.
Ou parfois il aide à nettoyer votre flotte correctement:
Je ne vois pas du tout 🙂 jsfiddle.net/nbaxZ/2
Je ne suis pas sûr de ce que je faisais, j'ai utilisé ce & à cette époque, il n'a pas fonctionné et maintenant, il fonctionne.. Merci.. Peut être je l'ai fait tellement de changements que je dois mettre quelque part d'autre. De toute façon merci .Il a résolu mon problème. Ignorer le dernier de mon premier commentaire que j'ai du faire une erreur la première fois quand j'ai ajouté
overflow:auto;
à l'époque il ajouté H-barre de Défilement . De toute façon mercivous êtes les bienvenus 🙂 je sais comment vous vous sentez, après on fait 100s des changements sans succès, c'est un peu frustrant et il est facile de ", se perdre dans le code" 😉 amusez-vous bien
OriginalL'auteur Roko C. Buljan
Juste ajouter:
display: block;
et
float: left;
à votre
.main-wrapper
classe, de sorte qu'il ressemble à ceci:OriginalL'auteur Rafael Vogel