HTML 和 CSS 高度属性
[英]HTML and CSS height property
问题描述
I'm beginning to get frustrated with CSS.
我开始对 CSS 感到沮丧。 Anytime I think I've grasped one of its many facets, I'm completely thrown off by unexpected behaviour.每当我认为我已经掌握了它的许多方面之一时，我就会完全被意想不到的行为所抛弃。
I've been trying to make a sticky footer.我一直在尝试制作一个粘性页脚。 SO I set the height of my body element to 100% so it takes up the full html element in height ( browser window ).所以我将 body 元素的高度设置为 100%，这样它就占据了整个 html 元素的高度（浏览器窗口）。 I then wrap everything inside the body in a div except for the footer element, and set this div's height to 100%, thinking that this will take up the full body in height and so push the footer off the bottom of the screen.然后我将 body 内的所有内容都包裹在一个 div 中，除了页脚元素，并将这个 div 的高度设置为 100%，认为这将占据整个 body 的高度，因此将页脚推离屏幕底部。 I could then apply a negative margin yo bring it up and fix it at the bottom.然后我可以应用负边距，将其调高并将其固定在底部。
But the footer sits at the bottom of the page below all the body, without need for a negative margin.. So my idea of setting height to 100% is completely thrown off.但是页脚位于页面底部的所有主体下方，不需要负边距..所以我将高度设置为 100% 的想法完全被抛弃了。 What's happened here?这里发生了什么事？
2 个解决方案
解决方案1
1 2021-01-16 09:34:44
If you want to create a fixed footer, then you don't need to worry about the height property.如果要创建固定页脚，则无需担心 height 属性。
.footer { position: fixed; left: 0; bottom: 0; width: 100%; text-align: center; background-color: yellow; }
<body> <p>This is the body</p> <div class="footer"> <p>Footer</p> </div> </body>
解决方案2
0 2013-03-26 16:46:28
HTML HTML
<div class="footer">Content</div>
CSS CSS
body{
margin:0; //you need it for the correct bottom margin
}
.footer
{
position: fixed;
bottom:0;
height:75px; //height of the footer
color:white;
background-color: black;
width:100%;
margin:0px;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.