[英]How can I make my absolute bottom container stay still when zooming?
I was wondering how I can stop this bottom text from moving around when someone zooms in or out. 我想知道当有人放大或缩小时如何阻止这些底部文本移动。 The rest of the page so far stays still but because I have had to use position:absolute to make this particular section stay at the bottom of another div (content), it now moves.
到目前为止,页面的其余部分保持静止,但是由于我不得不使用position:absolute来使此特定部分停留在另一个div(内容)的底部,因此它现在可以移动了。
#content {
border: 2px solid;
border-radius: 10px;
border-color:#ffffff;
box-shadow: 3px 3px 3px #999999;
}
#bottomsectioncontainer {
position:absolute;
bottom:0;
padding-left:200px;
padding-right:275px;
}
<div id="container2" style="width:1300px; height;975px; margin:auto">
<div id="content" style="background-color:#ffffff; height:975px";>
<!---content--->
<div id="bottomsectioncontainer" style="height: 5px; margin:auto;">
<div id="bottom1" style="width: 250px; float:left">
<h4 class="h4"> Example </h4>
<p class=bottompara>One thing <br>
Two Thing<br>
Three thing<br>
Four Thing<br>
Five Thing<br>
</p>
</div>
<div id="bottom2" style="width: 250px;float:left">
<h4 class="h4"> Example </h4>
<p class=bottompara>One thing <br>
Two Thing<br>
Three thing<br>
Four Thing<br>
Five Thing<br>
</p>
</div>
<div id="bottom3" style="width: 250px; float:left;">
<h4 class="h4"> Example </h4>
<p class="bottompara">One thing <br>
Two Thing<br>
Three thing<br>
Four Thing<br>
Five Thing<br>
</p>
</div>
</div>
</div>
</body>
</html>
position:relative;
in #content
it will fix that problem 在
#content
,它将解决该问题
and also remove height:5px
from bottomcontainer 并从底部容器中删除
height:5px
#content {
position:relative;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.