Résolu! CSS et HTML finis au en bas.Comment créer un DIV basé sur la taille du navigateur?
Ok, alors voici la situation. J'ai une page avec un div sur le côté, en haut et en bas. Le div sur le côté est à gauche à 225px. Le div sur le dessus est 25px, et le div sur le fond est 20px. Ce que je veux, c'est un div au milieu de tous, et donc il redimensionne (et est scrollable) basé sur la taille du navigateur des visiteurs. Ce que j'ai fonctionne, mais ne défilera pas, et n'est pas la bonne largeur, donc je dois centrer tout mon contenu dedans. C'est juste en utilisant la largeur du navigateur, mais poussé un peu avec une marge, de sorte qu'il est en fait suspendu au-dessous de la barre latérale.
A quick sketch of how it's setup.
Toutes les idées?
Légende: menu est le top. bottom_menu est le menu du bas. le contenu est la partie avec laquelle j'ai besoin d'aide, au centre. sidebar est ce qui se passe sur le côté.
CSS:
@charset "UTF-8";
/* CSS Document */
html {
height:100%;
}
img
{
border-style: none;
color: #FFF;
text-align: center;
}
body {
height:100%;
width:100%;
margin:0px;
padding:0px;
background-color:#000;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
width:225px;
min-height:100%;
position:fixed;
top:25px;
left:0px;
overflow:hidden;
padding-left:5px;
padding-top:5px;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
width:100%;
height:25px;
position:fixed;
top:0px;
left:0px;
overflow:hidden;
padding-left:5px;
}
.content {
width:100%;
top:25px;
height:100%;
overflow:hidden;
position:fixed;
padding-left:5px;
padding-top:5px;
background-color:#FFF;
margin-left:112px;
font: 14px Helvetica, Arial, Sans-Serif;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
width:100%;
height:20px;
position:fixed;
bottom:0px;
left:0px;
overflow:hidden;
padding-left:5px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
}
HTML (DIV Placement):
<body>
<div class="sidebar">CONTENT IN SIDEBAR</div>
<div class="menu">CONTENT IN TOP MENU</div>
<div class="bottom_menu">CONTENT IN BOTTOM MENU</div>
<div class="content">CONTENT IN CONTENT</div>
</body>
Fini CSS
@charset "UTF-8";
/* CSS Document */
img {
border-style: none;
color: #FFF;
text-align: center;
}
body {
background-color:#000;
margin:0;
padding:0;
border:0; /* This removes the border around the viewport in old versions of IE */
width:100%;
height:100%;
}
.sidebar {
background-image:url(../images/sidebar/background.png);
background-repeat:repeat-y;
font: 12px Helvetica, Arial, Sans-Serif;
color: #666;
z-index:1;
min-height:100%;
}
.menu {
background-image:url(../images/top_menu/background.png);
background-repeat:repeat-x;
height:25px;
clear:both;
float:left;
width:100%;
position:fixed;
top:0px;
z-index:5;
background-color:#000;
}
.bottom_menu {
background-image:url(../images/bottom_menu/background.png);
background-repeat:repeat-x;
height:20px;
z-index:2;
font: 12px Helvetica, Arial, Sans-Serif;
clear:both;
float:left;
width:100%;
position:fixed;
bottom:0px;
}
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
min-height:100%;
}
.sidebar .colright {
float:left;
width:200%;
position:relative;
left:225px;
background:#fff;
}
.sidebar .col1wrap {
float:right;
width:50%;
position:relative;
right:225px;
}
.sidebar .col1 {
margin:30px 15px 0 225px; /* TOP/UNKNOWN/UNKNOWN/RIGHT */
position:relative;
right:100%;
overflow:hidden;
}
.sidebar .col2 {
float:left;
width:225px;
position:fixed;
top:0px;
left:0px;
margin-top:25px;
margin-left:5px;
right:225px;
}
.clear {
clear: both;
height: 1px;
overflow: hidden;
}
HTML fini:
<body>
<div class="menu">HEADER CONTENT</div>
<div class="colmask sidebar">
<div class="colright">
<div class="col1wrap">
<div class="col1">
CONTENT
</div>
</div>
<div class="col2">
LEFT SIDEBAR CONTENT
</div>
</div>
</div>
<div class="bottom_menu">FOOTER CONTENT</div>
<div class="clear"></div>
</body>
Merci pour le lien. Cela a bien fonctionné avec un peu de peaufinage. – Devin
Y a-t-il une chance que tu puisses publier ce que tu as fini? J'ai eu plusieurs niveaux de succès en essayant de le faire auparavant, mais je n'ai jamais été complètement satisfait des solutions que j'ai trouvées. – Loktar
contenu terminé posté ci-dessus. – Devin