C'est ce que j'essaie d'accomplir: Le contenu est de hauteur variable et que la barre de défilement de contenu doit être affichée dans le corps de la page (et non sur la zone de la page) .
J'ai réussi à obtenir l'idée de base, mais je rencontre des problèmes pour que le contenu divisé est une position correcte lorsque la barre de défilement montre, et même si je suis configuré pour toujours afficher les barres de défilement, je ne peux pas utiliser de largeur fixe car elles diffèrent Du navigateur au navigateur. dans le code ci-dessus est désactivé par la largeur de la barre de défilement, comment puis-je le faire correctement avec le reste de la page (c.-à-d. Calculer sa position Sans envisager la largeur de la barre de défilement, même s'il en a une)?
5 Réponses :
Il existe des moyens de le faire avec des hauteurs fixes, puis utilisez la propriété de débordement sur les zones défilées. Cependant, ce n'est pas une bonne pratique, ce que vous devriez regarder consiste à utiliser un en-tête collant ou une en-tête de défilement (un qui suit la zone de visualisation lorsque l'utilisateur fait défiler l'utilisateur) de JQuery ou de votre bibliothèque de choix JS.
Si je comprends votre problème correctement, ce sera une solution: http://jsfiddle.net/7pjs8/
Supposons que la section d'en-tête statique n'était pas une hauteur constante, mais variant selon la situation? Y a-t-il encore un moyen de CSS-seul pour obtenir le contenu ci-dessous pour faire défiler, plutôt que toute la fenêtre entière?
ne fonctionne pas : fixe résolvez votre problème? Si vous définissez Position: Correction à l'en-tête et au menu DIV?
Oui, cela fait, bien que je me souvienne vaguement de ce n'étant pas une option "standard". Ou peut-être que c'était en ce qui concerne la position de fond, maintenant je ne suis pas sûr. Je vais essayer, merci!
<style>
body {
padding: 0px;
}
.container {
margin: 0px auto;
position: relative;
width: 500px;
}
#header {
left: 0px;
position: fixed;
top: 0px;
width: 100%;
z-index: 1000;
}
#header .container {
background: blue;
height: 100px;
}
#content {
background: green;
height: 1500px;
margin-top: 100px;
}
#content .inner {
margin-right: 200px;
}
#sidebar {
left: 0px;
position: fixed;
top: 100px;
width: 100%;
z-index: 1000;
}
#sidebar .inner {
background: red;
height: 200px;
position: absolute;
right: 0px;
top: 0px;
width: 200px;
}
</style>
<div id="header">
<div class="container">
header
</div>
</div>
<div id="content" class="container">
<div class="inner">
content
</div>
</div>
<div id="sidebar">
<div class="container">
<div class="inner">
sidebar
</div>
</div>
</div>
Possible solution: http://jsfiddle.net/zWERN/
Définition d'un défilement sur la totalité de la page peut entraîner une en-tête et un menu disparaissant - lorsque le contenu est long.
Ce que vous recherchez est un sous-ensemble du Sainte Graal Design . P>
ici est une implémentation à l'aide de l'affichage Flex: p>
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset=utf-8 />
<title>Holy Grail</title>
<!-- Reset browser defaults -->
<link rel="stylesheet" href="reset.css">
</head>
<body style="display: flex; height: 100%; flex-direction: column">
<div>HEADER<br/>------------
</div>
<!-- No need for 'flex-direction: row' because it's the default value -->
<div style="display: flex; flex: 1">
<div>NAV|</div>
<div style="flex: 1; overflow: auto">
CONTENT - START<br/>
<script>
for (var i=0 ; i<1000 ; ++i) {
document.write(" Very long content!");
}
</script>
<br/>CONTENT - END
</div>
<div>|SIDE</div>
</div>
<div>------------<br/>FOOTER</div>
</body>
</html>
+1 graphique ASCII. Et il est toujours agréable de voir une bonne question au format d'un nouvel utilisateur.
Est-ce que ceci est à la largeur fixe ou si l'en-tête devrait-il couvrir toute la fenêtre?
L'ensemble du "corps" (en-tête, contenu + menu ci-dessous) doit être sur une largeur fixe. J'ai eu des problèmes auparavant avec des moniteurs vraiment larges quand je n'ai pas réglé de largeur fixe ...
Comprendre votre HTML était assez difficile, puis-je suggérer qu'à l'avenir, vous ajoutez des noms de classe / ID de classe appropriés et utilisez une feuille de style.