Permettez-moi de commencer par un jsFiddle: https://jsfiddle.net/johnlove/f14rjc9o/35/
Pour un DIV intérieur avec une bordure, je veux faire défiler le contenu de la DIV, mais garder la bordure fixe?
L'arrière-plan se concentre sur la possibilité de faire défiler un DIV intérieur en utilisant uniquement la barre de défilement de la fenêtre et pas strong > utilisez overflow-y .
Quand je fais défiler en utilisant la barre de défilement de la fenêtre, la DIV intérieure #scrollableContent défile ... mais le texte à l'intérieur du css la bordure fuit!
Voici une image ou 2 ... la première avant d'utiliser la barre de défilement ... la deuxième après l'utilisation de la barre de défilement ... comme vous pouvez le voir, le texte à l'intérieur de la bordure rouge sort la bordure rouge:
1) HTML
body, #roundedCornersWrapper, #roundedCorners, #scrollableContent {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: darkgreen url(../pics/garlandBackground.gif);
}
#roundedCornersWrapper {
/*
"padding" = width of .overlay "borders"
*/
padding: 2.5em 2.5em;
}
#roundedCorners {
background: white url(../pics/music_notes.gif);
border-style: solid;
border-color: red;
border-radius: 1.25em;
border-width: .50em;
}
/*
This is added white space inside of your .overlay "borders" + #roundedCorners.
This separates the text etc. content from .overlay.
*/
#scrollableContent {
/*
v = 0 makes up for leading and trailing <p> .. </p> in text
*/
padding: 0.0em 1.0em; /* v,h */
}
/*
BEGIN the magic needed to make the roundedBodyCorners fill the whole window
*/
html, body {
height: 100%;
}
#roundedCornersWrapper {
height: 100%;
}
#roundedCorners {
height: 100%;
}
#scrollableContent {
height: 100%;
/*
overflow-y: auto; // the whole! idea is to dump the interior scrollbar //
*/
}
/*
END fill magic
*/
/*
Odds-and-Ends
*/
#scrollableContent {
font-size: 1.5em; /* = 1.5 X 12px from html Selector */
}
2) CSS
D'abord, le code de .overlay:
.overlay {
position: fixed;
}
#overlayTop, #overlayBottom {
height: 2.5em;
width: 100%;
}
#overlayLeft, #overlayRight {
height: 100%;
width: 2.5em;
}
#overlayTop { top: 0; }
#overlayLeft { left: 0; }
#overlayRight { right: 0; }
#overlayBottom { bottom: 0; }
Maintenant, le trucs ...
<!--
BoltClock's code to scroll inner DIV using window's scrollbar
-->
<div id="overlayTop" class="overlay"></div>
<div id="overlayRight" class="overlay"></div>
<div id="overlayBottom" class="overlay"></div>
<div id="overlayLeft" class="overlay"></div>
<div id="roundedCornersWrapper">
<div id="roundedCorners">
<div id="scrollableContent">
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
<p>etc etc</p>
</div>
</div>
</div>
6 Réponses :
Une façon d'obtenir cet effet est de définir la Dans l'exemple ci-dessous, le pseudo-élément Tout (sauf le largeur de la bordure) est définie à l'aide des propriétés personnalisées CSS en haut, vous pouvez donc modifier l'un des éléments suivants: et tout le reste se reconfigurera proportionnellement. Exemple de travail: largeur , la hauteur et le padding du code> puis en utilisant les pseudo-éléments :: before et :: after :
clip-path hors du reste de la fenêtre visible clip-path une bordure fixe pour la fenêtre de texte :: before clip-path peint tout le reste du fond du corps en noir et le :: after pseudo-élément clip-path donne à la fenêtre de texte une bordure rouge 6px .
--textWidth --textHeight --textPadding
<body>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, 'Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
<p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled 'ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.</p>
<p>'Well!' thought Alice to herself, 'after such a fall as this, I shall think nothing of tumbling down stairs! How brave they'll all think me at home! Why, I wouldn't say anything about it, even if I fell off the top of the house!' (Which was very likely true.)</p>
<p>Down, down, down. Would the fall never come to an end! 'I wonder how many miles I've fallen by this time?' she said aloud. 'I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down, I think—' (for, you see, Alice had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) '—yes, that's about the right distance—but then I wonder what Latitude or Longitude I've got to?' (Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say.)</p>
<p>Presently she began again. 'I wonder if I shall fall right through the earth! How funny it'll seem to come out among the people that walk with their heads downward! The Antipathies, I think—' (she was rather glad there was no one listening, this time, as it didn't sound at all the right word) '—but I shall have to ask them what the name of the country is, you know. Please, Ma'am, is this New Zealand or Australia?' (and she tried to curtsey as she spoke—fancy curtseying as you're falling through the air! Do you think you could manage it?) 'And what an ignorant little girl she'll think me for asking! No, it'll never do to ask: perhaps I shall see it written up somewhere.'</p>
<p>Down, down, down. There was nothing else to do, so Alice soon began talking again. 'Dinah'll miss me very much to-night, I should think!' (Dinah was the cat.) 'I hope they'll remember her saucer of milk at tea-time. Dinah my dear! I wish you were down here with me! There are no mice in the air, I'm afraid, but you might catch a bat, and that's very like a mouse, you know. But do cats eat bats, I wonder?' And here Alice began to get rather sleepy, and went on saying to herself, in a dreamy sort of way, 'Do cats eat bats? Do cats eat bats?' and sometimes, 'Do bats eat cats?' for, you see, as she couldn't answer either question, it didn't much matter which way she put it. She felt that she was dozing off, and had just begun to dream that she was walking hand in hand with Dinah, and saying to her very earnestly, 'Now, Dinah, tell me the truth: did you ever eat a bat?' when suddenly, thump! thump! down she came upon a heap of sticks and dry leaves, and the fall was over.</p>
<p>Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turned a corner, 'Oh my ears and whiskers, how late it's getting!' She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof.</p>
<p>There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.</p>
<p>Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them.</p>
<p>However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted!</p>
<p>Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliest garden you ever saw. How she longed to get out of that dark hall, and wander about among those beds of bright flowers and those cool fountains, but she could not even get her head though the doorway; 'and even if my head would go through,' thought poor Alice, 'it would be of very little use without my shoulders. Oh, how I wish I could shut up like a telescope! I think I could, if I only know how to begin.' For, you see, so many out-of-the-way things had happened lately, that Alice had begun to think that very few things indeed were really impossible.</p>
<p>There seemed to be no use in waiting by the little door, so she went back to the table, half hoping she might find another key on it, or at any rate a book of rules for shutting people up like telescopes: this time she found a little bottle on it, ('which certainly was not here before,' said Alice,) and round the neck of the bottle was a paper label, with the words 'DRINK ME' beautifully printed on it in large letters.</p>
<p>It was all very well to say 'Drink me,' but the wise little Alice was not going to do that in a hurry. 'No, I'll look first,' she said, 'and see whether it's marked "poison" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked 'poison,' it is almost certain to disagree with you, sooner or later.</p>
<p>However, this bottle was not marked 'poison,' so Alice ventured to taste it, and finding it very nice, (it had, in fact, a sort of mixed flavour of cherry-tart, custard, pine-apple, roast turkey, toffee, and hot buttered toast,) she very soon finished it off.</p>
</body>
:root {
--textWidth: 400px;
--textHeight: 120px;
--textPadding: 12px;
--textWindowWidth: calc(var(--textWidth) + (2 * var(--textPadding)));
--textWindowHeight: calc(var(--textHeight) + (2 * var(--textPadding)));
--topMargin: calc((100vh - var(--textWindowHeight)) / 2);
--bottomMargin: calc(var(--topMargin) + var(--textWindowHeight));
--leftMargin: calc((100% - var(--textWindowWidth)) / 2);
--rightMargin: calc(var(--leftMargin) + var(--textWindowWidth));
}
body {
width: var(--textWidth);
height: var(--textHeight);
margin: var(--topMargin) var(--leftMargin);
padding: var(--textPadding);
border-radius: 15px;
}
body p:first-of-type {
margin-top: 0;
}
body p:last-of-type {
margin-bottom: calc(50vh - (var(--textHeight) / 2));
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgb(191, 191, 191);
clip-path: polygon(
0% 0%,
0% 100%,
var(--leftMargin) 100%,
var(--leftMargin) var(--topMargin),
var(--rightMargin) var(--topMargin),
var(--rightMargin) var(--bottomMargin),
var(--leftMargin) var(--bottomMargin),
var(--leftMargin) 100%,
100% 100%,
100% 0%
);
}
body::after {
content: '';
position: fixed;
top: var(--topMargin);
right: var(--rightMargin);
bottom: var(--bottomMargin);
left: var(--leftMargin);
width: var(--textWindowWidth);
height: var(--textWindowHeight);
padding: 6px;
background-color: rgb(255, 0, 0);
border-radius: 8px;
transform: translate(-6px, -6px);
clip-path: polygon(
0% 0%,
0% 100%,
6px 100%,
6px 6px,
calc(var(--textWindowWidth) + 6px) 6px,
calc(var(--textWindowWidth) + 6px) calc(var(--textWindowHeight) + 6px),
6px calc(var(--textWindowHeight) + 6px),
6px 100%,
100% 100%,
100% 0%
);
}
Je suis très, très reconnaissant de votre temps, je le suis vraiment. Mais votre solution me semble bien trop complexe. Si vous voulez bien me faire plaisir un peu, voici un violon qui illustre le problème en utilisant du HTML et du CSS basiques. jsfiddle.net/johnlove/Lua1rj4e/48 Comme vous pouvez le voir, le texte intérieur passe à travers les limites verticales de la bordure rouge. Si vous pouvez étendre votre aide un peu plus loin, je l'apprécierais vraiment.
Après quelques expérimentations, j'ai mis au point une solution alternative (avec un CSS beaucoup plus simple). Personnellement, je considère toujours cette solution comme la meilleure, car, bien que le CSS soit plus complexe, le balisage HTML est entièrement sémantique et (contrairement à l'autre solution) il ne nécessite pas de HTML de présentation supplémentaire éléments. (Alors, pouvez-vous également voter pour cette solution , s'il vous plaît - merci!)
Je viens de découvrir un boo-boo, mais je ne sais pas encore pourquoi. Quoi qu'il en soit, dans le sélecteur .text {...}, mettez un fond gif, tout fera l'affaire. Ensuite, nous obtenons le débordement dont je parlais
Hmm. Il ne devrait pas y avoir de débordement visible. J'ai changé l'arrière-plan ci-dessus en gris et il n'y a pas de débordement (dans Firefox).
J'ai prouvé que la couleur de fond: DOIT correspondre à la couleur: du .text. Sinon, il y a débordement haut et bas. Pour vous satisfaire, utilisez un: root (matchingColor: gray) dans vos styles.
J'ai également prouvé que si vous avez une image d'arrière-plan, vous êtes dans un ruisseau sans pagaie.
Nous ne voyons pas la même chose, @John. Je ne vois aucun débordement avec l'une ou l'autre des solutions dans Firefox. Quel navigateur utilisez-vous? Avez-vous inclus les déclarations de style z-index ?
J'ai finalement! trouvé mon! Erreur. Doit ajouter z-index: 12; pour les DEUX .bodyBackground {...} et .textBorder {...}. Ma faute!! ET, devinez quoi, je peux avoir une image d'arrière-plan et votre solution fonctionne !!
Génial, @John. Nous y sommes arrivés à la fin! :-RÉ
Voici une alternative plus simple à la solution plus avancée clip-path , ci-dessous.
Le principal avantage de cette solution est que le CSS est beaucoup plus simple.
Le principal inconvénient est qu'il contient 8
Exemple de travail:
<div class="bodyBackground top"></div>
<div class="bodyBackground right"></div>
<div class="bodyBackground bottom"></div>
<div class="bodyBackground left"></div>
<div class="textBorder top"></div>
<div class="textBorder right"></div>
<div class="textBorder bottom"></div>
<div class="textBorder left"></div>
<div class="text">
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, 'and what is the use of a book,' thought Alice 'without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, 'Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<p>In another moment down went Alice after it, never once considering how in the world she was to get out again.</p>
<p>The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about stopping herself before she found herself falling down a very deep well.</p>
<p>Either the well was very deep, or she fell very slowly, for she had plenty of time as she went down to look about her and to wonder what was going to happen next. First, she tried to look down and make out what she was coming to, but it was too dark to see anything; then she looked at the sides of the well, and noticed that they were filled with cupboards and book-shelves; here and there she saw maps and pictures hung upon pegs. She took down a jar from one of the shelves as she passed; it was labelled 'ORANGE MARMALADE', but to her great disappointment it was empty: she did not like to drop the jar for fear of killing somebody, so managed to put it into one of the cupboards as she fell past it.</p>
<p>'Well!' thought Alice to herself, 'after such a fall as this, I shall think nothing of tumbling down stairs! How brave they'll all think me at home! Why, I wouldn't say anything about it, even if I fell off the top of the house!' (Which was very likely true.)</p>
<p>Down, down, down. Would the fall never come to an end! 'I wonder how many miles I've fallen by this time?' she said aloud. 'I must be getting somewhere near the centre of the earth. Let me see: that would be four thousand miles down, I think—' (for, you see, Alice had learnt several things of this sort in her lessons in the schoolroom, and though this was not a very good opportunity for showing off her knowledge, as there was no one to listen to her, still it was good practice to say it over) '—yes, that's about the right distance—but then I wonder what Latitude or Longitude I've got to?' (Alice had no idea what Latitude was, or Longitude either, but thought they were nice grand words to say.)</p>
<p>Presently she began again. 'I wonder if I shall fall right through the earth! How funny it'll seem to come out among the people that walk with their heads downward! The Antipathies, I think—' (she was rather glad there was no one listening, this time, as it didn't sound at all the right word) '—but I shall have to ask them what the name of the country is, you know. Please, Ma'am, is this New Zealand or Australia?' (and she tried to curtsey as she spoke—fancy curtseying as you're falling through the air! Do you think you could manage it?) 'And what an ignorant little girl she'll think me for asking! No, it'll never do to ask: perhaps I shall see it written up somewhere.'</p>
<p>Down, down, down. There was nothing else to do, so Alice soon began talking again. 'Dinah'll miss me very much to-night, I should think!' (Dinah was the cat.) 'I hope they'll remember her saucer of milk at tea-time. Dinah my dear! I wish you were down here with me! There are no mice in the air, I'm afraid, but you might catch a bat, and that's very like a mouse, you know. But do cats eat bats, I wonder?' And here Alice began to get rather sleepy, and went on saying to herself, in a dreamy sort of way, 'Do cats eat bats? Do cats eat bats?' and sometimes, 'Do bats eat cats?' for, you see, as she couldn't answer either question, it didn't much matter which way she put it. She felt that she was dozing off, and had just begun to dream that she was walking hand in hand with Dinah, and saying to her very earnestly, 'Now, Dinah, tell me the truth: did you ever eat a bat?' when suddenly, thump! thump! down she came upon a heap of sticks and dry leaves, and the fall was over.</p>
<p>Alice was not a bit hurt, and she jumped up on to her feet in a moment: she looked up, but it was all dark overhead; before her was another long passage, and the White Rabbit was still in sight, hurrying down it. There was not a moment to be lost: away went Alice like the wind, and was just in time to hear it say, as it turned a corner, 'Oh my ears and whiskers, how late it's getting!' She was close behind it when she turned the corner, but the Rabbit was no longer to be seen: she found herself in a long, low hall, which was lit up by a row of lamps hanging from the roof.</p>
<p>There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to get out again.</p>
<p>Suddenly she came upon a little three-legged table, all made of solid glass; there was nothing on it except a tiny golden key, and Alice's first thought was that it might belong to one of the doors of the hall; but, alas! either the locks were too large, or the key was too small, but at any rate it would not open any of them.</p>
<p>However, on the second time round, she came upon a low curtain she had not noticed before, and behind it was a little door about fifteen inches high: she tried the little golden key in the lock, and to her great delight it fitted!</p>
<p>Alice opened the door and found that it led into a small passage, not much larger than a rat-hole: she knelt down and looked along the passage into the loveliest garden you ever saw. How she longed to get out of that dark hall, and wander about among those beds of bright flowers and those cool fountains, but she could not even get her head though the doorway; 'and even if my head would go through,' thought poor Alice, 'it would be of very little use without my shoulders. Oh, how I wish I could shut up like a telescope! I think I could, if I only know how to begin.' For, you see, so many out-of-the-way things had happened lately, that Alice had begun to think that very few things indeed were really impossible.</p>
<p>There seemed to be no use in waiting by the little door, so she went back to the table, half hoping she might find another key on it, or at any rate a book of rules for shutting people up like telescopes: this time she found a little bottle on it, ('which certainly was not here before,' said Alice,) and round the neck of the bottle was a paper label, with the words 'DRINK ME' beautifully printed on it in large letters.</p>
<p>It was all very well to say 'Drink me,' but the wise little Alice was not going to do that in a hurry. 'No, I'll look first,' she said, 'and see whether it's marked "poison" or not'; for she had read several nice little histories about children who had got burnt, and eaten up by wild beasts and other unpleasant things, all because they would not remember the simple rules their friends had taught them: such as, that a red-hot poker will burn you if you hold it too long; and that if you cut your finger very deeply with a knife, it usually bleeds; and she had never forgotten that, if you drink much from a bottle marked 'poison,' it is almost certain to disagree with you, sooner or later.</p>
<p>However, this bottle was not marked 'poison,' so Alice ventured to taste it, and finding it very nice, (it had, in fact, a sort of mixed flavour of cherry-tart, custard, pine-apple, roast turkey, toffee, and hot buttered toast,) she very soon finished it off.</p>
</div>
.bodyBackground {
position: fixed;
z-index: 12;
background-color: rgb(191, 191, 191);
}
.bodyBackground.top,
.bodyBackground.bottom {
left: 0;
width: 100%;
height: 20%;
}
.bodyBackground.right,
.bodyBackground.left {
top: 0;
width: 20%;
height: 100%;
}
.bodyBackground.top {
top: 0;
}
.bodyBackground.right {
right: 0;
}
.bodyBackground.bottom {
bottom: 0;
}
.bodyBackground.left {
left: 0;
}
.textBorder {
position: fixed;
z-index: 12;
background-color: rgb(255, 0, 0);
}
.textBorder.top,
.textBorder.bottom {
left: 20%;
width: 60%;
height: 6px;
}
.textBorder.top {
top: 20%;
}
.textBorder.bottom {
bottom: 20%;
}
.textBorder.right,
.textBorder.left {
top: 20%;
width: 6px;
height: 60%;
}
.textBorder.right {
right: 20%;
}
.textBorder.left {
left: 20%;
}
.text {
position: relative;
margin: 24vh 20vw;
}
Rourin ... vous êtes vraiment rapide (Merci!). Je viens de créer un projet BBEdit et d'y inclure votre code. Dans environ 5 minutes, j'imprimerai le code et je le regarderai demain pour voir pourquoi le vôtre fonctionne et le mien ne fonctionne pas (c'est-à-dire que mon texte déborde du haut et du bas de la bordure). Donnez-moi ce temps et je vous répondrai. BTW, une autre raison du retard est que je dois aller chez le dentiste demain.
Voici mon "désastre" ... lovesongforever.com/scroll
Si vous ajoutez un arrière-plan au sélecteur .test et que l'arrière-plan est principalement clair, par exemple blanc, il y aura un débordement au-dessus de la bordure rouge et en dessous. Il ne s'affiche pas maintenant car la zone à l'extérieur de la bordure rouge est noire et l'impression elle-même est noire. Le débordement est définitivement là, vous ne pouvez tout simplement pas le voir car l'impression noire est sur fond noir à l'extérieur de la bordure rouge. J'essaierai de le comprendre plus tard après avoir dormi.
Hmm. Il ne devrait pas y avoir de débordement visible. J'ai changé l'arrière-plan ci-dessus en gris et il n'y a pas de débordement (dans Firefox).
J'ai finalement! a trouvé mon erreur ... z-index: 12 pour .bodyBackground et .textBorder Je viens de marquer votre 2ème approche comme la solution.
Je vous recommande d'adopter un fichier = "rootDependencies.css", ou ce que vous choisissez de le nommer, et de le lier dans votre fichier .html. Et à l'intérieur de ce fichier lié, placez ce qui suit:
:root {
--viewportWidth: 100vw;
--viewportHeight: 100vh;
--backgroundColor: lightblue;
--textColor: black;
--matchingColor: gray;
--textborderInset: 20%;
--borderThickness: 0.5em;
}
Comme vous le savez beaucoup mieux que moi, vous avez beaucoup de dépendances arithmétiques. Oui, l'arithmétique impliquée est très basique, ajoutez soustraire multiplier, mais vous pouvez exprimer ces dépendances via calc (var (- var1) - var (- var2)) dans votre feuille de style. p>
Et le meilleur de tous, cette approche diminue la probabilité que vous manquiez des calculs tels que: calc (100% - 2 * 20%) etc etc.
p>
Et voici la preuve finale que l'utilisation d'une image d'arrière-plan fonctionne vraiment !!
Rounin:
Nous savons tous les deux que le débordement du .text est là, mais il n'est pas visible à cause de z-index: 12; à la fois sur .bodyBackground et .textBorder .
Maintenant, vient la question: avec la marge : 23vh 22vw; pour .text, pourquoi le sélecteur z-index doit-il l'être? La marge, dans votre modèle, la distance entre l'objet .text et le ViewPort, ne devrait-elle pas naturellement empêcher le débordement de se produire?
Voici une image de votre mise en page:
Je sais juste? cela a quelque chose à voir avec le modèle de boîte de base , mais je ne peux pas le comprendre!
Pour le bénéfice des autres essayant de répondre à ce puzzle, .bodyBackground et .textBorder ont position: fixed; et .text = < code> position: relative;
RÉSOLU! Problème: comment faire défiler une DIV interne avec la barre de défilement de la fenêtre externe? Voici le résultat final: lovesongforever.com/scroll
RÉSOLU!
Problème:
Comment faire défiler une DIV interne avec la barre de défilement de la fenêtre externe?
Voici le résultat final:
Je viens de regarder mon OP et il dit "L'arrière-plan se concentre sur la capacité de faire défiler un DIV intérieur en utilisant uniquement la barre de défilement de la fenêtre et de ne pas utiliser overflow-y."
J'ai mal compris ... j'ai rouvert la question et vous pouvez annuler votre modification, et à la place fournir à la question un exemple reproductible minimal .
Est-ce ce que vous essayez de faire? stackoverflow.com/questions/11588628/…
Voici le jsFiddle que vous avez demandé: jsfiddle.net/johnlove/f14rjc9o/35
TO: EternalHour ... oui, et le code que j'ai présenté ci-dessus duplique que ... le problème survient dès que j'ajoute le graphique de la couronne en arrière-plan ... alors les choses commencent à se casser.