I have an HTML which is centered horizontally and contains a bunch of <p> tags. When the centered div height exceeds the height of the page, it indents the div. How can I stop this from happening?
.container {
display: flex;
justify-content: center;
}
.center {
width: 600px;
max-width: 600px;
border-left: 1px;
border-right: 1px;
border-top: 1px;
border-bottom: 1px;
border-color: rgb(0, 0, 0);
border-style: solid;
}<div class="container">
<div class="center">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>I have an HTML which is centered horizontally and contains a bunch of <p> tags. When the centered div height exceeds the height of the page, it indents the div. How can I stop this from happening?
.container {
display: flex;
justify-content: center;
}
.center {
width: 600px;
max-width: 600px;
border-left: 1px;
border-right: 1px;
border-top: 1px;
border-bottom: 1px;
border-color: rgb(0, 0, 0);
border-style: solid;
}<div class="container">
<div class="center">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>I have tried setting overflow to 'auto' in the center div. This has not worked.
Share Improve this question edited Mar 5 at 23:20 Ori Drori 194k32 gold badges238 silver badges229 bronze badges asked Mar 5 at 23:15 Max FogdallMax Fogdall 112 bronze badges 1- 1 You mean, the browser scrollbar comes showing up causing the actual viewport to be a little bit more narrow and thus forcing the center of the page to be a little more left than if the scrollbar wasn't visible? – prettyInPink Commented Mar 5 at 23:29
1 Answer
Reset to default 1To prevent the centered div from jumping when the scrollbar appears due to height changes, you can use the new scrollbar-gutter property. Use the property on the scroll container (<html> in this case):
html {
scrollbar-gutter: stable both-edges;
}
Demo - run the demo, click "Full page" and reduce the height using the dev tools:
html {
scrollbar-gutter: stable both-edges;
}
.container {
display: flex;
justify-content: center;
}
.center {
width: 600px;
max-width: 600px;
border-left: 1px;
border-right: 1px;
border-top: 1px;
border-bottom: 1px;
border-color: rgb(0, 0, 0);
border-style: solid;
}<div class="container">
<div class="center">
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745002962a4605609.html
评论列表（0条）