Aide à la programmation, réponses aux questions / Html / Centrage du contenu du site sans chevauchement d'en-tête et de pied de page - html, css

Centrer le contenu du site sans chevauchement d'en-tête et de pied de page - html, css

J'ai une structure de site de base avec un en-tête, unpied de page et une zone de contenu. Presque toutes les solutions que j'ai pu trouver pour centrer le contenu de la page utilisent le positionnement absolu CSS, en définissant les marges de la div de contenu et en le faisant flotter au centre de la fenêtre du navigateur. Cependant, il en résulte que le contenu couvre l'en-tête et / ou le pied de page lorsque la taille de la fenêtre est réduite. Au lieu de cela, j'aimerais que la page défile lorsqu'elle ne peut pas rentrer dans la fenêtre.

Voici une capture d'écran de la page: mise en page - la zone avec une bordure rouge doit être centrée verticalement

La zone avec la bordure rouge doit être centrée verticalement sans couvrir aucun des autres éléments.

Voici le HTML et le CSS que j'utilise:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Layout Test</title>
</head>

<body>
<div class="wrapper">
<div class="header">Header Content</div>
<div class="articleContainer">
<div class="articleLeft">
<div class="articleTitle">
<h1 class="articleTitle">Title</h1>
</div>
<div class="articleText">
<p>Lorem ipsum ...</p>
</div>
</div>
<div class="articleRight">
<div class="articleImage"></div>
</div>
<div class="stepper">Stepper</div>
</div>
<div class="push"></div>
</div>
<div class="footer">Footer Content</div>
</body>
</html>

CSS:

@charset "utf-8";


* {
margin: 0;
}

html, body {
height: 100%;
}

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -48px;
}
.header {
text-align: center;
background-color: #7FF152;
height: 48px;
}

.articleContainer {
background-color: #CCFFFF;
margin-right: auto;
margin-left: auto;
width: 700px;
clear: both;
min-height: 240px;
position: relative;
border: medium solid #FF0000;
}

.articleLeft {
float: left;
height: 450px;
width: 330px;
}

.articleTitle {
text-align: center;
margin: 20px;
}

.articleText {
max-height: 350px;
overflow: auto;
}

.articleRight {
float: right;
height: 450px;
width: 330px;
background: url(articleImage.fw.png) no-repeat center center;
}

.stepper {
clear: both;
text-align: center;
background-color: #FFFF00;
}

.footer {
background-color: #CC6633;
text-align: center;
height: 48px;
}

.footer, .push {
height: 48px; /* .push must be the same height as .footer */
}

J'ai téléchargé les deux ici: http://cl.ly/3f2o1v0U2c0k

Voici le jsfiddle: http://jsfiddle.net/gudmN/1/

Merci pour l'aide.

Réponses:

0 pour la réponse № 1

1) ajouter margin: 0 auto; height: auto; float: left à .articlecontainer.
2) Créez l'en-tête et le pied de page float: left; width: 100%; height: 48px