css怎么让盒子固定
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css怎么让盒子固定相关的知识，希望对你有一定的参考价值。
参考技术A 通过定位属性来实现盒子的固定。position: fixed;
上述属性和值可以实现盒子的固定，参照物是window，不管页面怎么移动，盒子位置都不会改变。
通过top，left等属性来移动盒子的位置，top这些方位的属性值可以是具体的像素也可以是百分比。
CSS 100% 高度布局
【中文标题】CSS 100% 高度布局【英文标题】：CSS 100% height layout 【发布时间】：2011-09-03 18:39:40 【问题描述】：我知道这是一个常见问题，我查找了一些解决方案，但找不到我想要的确切内容。
我想将this 转换为无表格布局。
注意：页眉和页脚必须设置为以像素为单位的固定高度（50 像素即可）。
我遇到的主要问题是，我无法让中间的那个“大盒子”表现得像处理桌子时那样。有一些解决方案适用于可变长度内容（文本、图像），但我希望这个盒子看起来和表现得像一个盒子——有边框、圆角等等。
【问题讨论】：
***.com/questions/485827/… ***.com/questions/172918/… 这里还有一个例子：reallinks.org/DIV-Header-Layout-100-Height + 2 列/左右 【参考方案1】：你没有说你的子元素的高度，所以我不得不做出一些假设。如果需要，您可以使用百分比。
<style>
html,body margin:0;padding:0;
#mainContainer
height:100%;
width:100%;
#header
height:15%;
width:100%;
background-color:red;
#center
height:75%;
width:100%;
background-color:blue;
#footer
height:10%;
width:100%;
background-color:pink;
</style>
<body>
<div id="mainContainer">
<div id="header">Header</div>
<div id="center">Center</div>
<div id="footer">Footer</div>
</div>
</div>
</body>
【讨论】：
是的，同意 - 我编辑了这个问题。它们确实需要固定高度（例如 50px）。 这无论如何都行不通。百分比高度要求父容器具有指定的高度。当父级没有指定高度时，将 height:100% 视为 height:auto。 jsfiddle.net/ajVSd/1 @Layke 可以看看***.com/questions/30106602/… 吗？【参考方案2】：您可以使用表格样式 CSS 属性来做到这一点，但仍保留无表格标记（这仍然是一个胜利）。
示例
HTML
<div id="container">
<div id="header"><div>header</div></div>
<div id="content"><div>content</div></div>
<div id="footer"><div>footer</div></div>
</div>
CSS
html,
body
height: 100%;
padding: 0;
margin: 0;
#container
display: table;
width: 100%;
height: 100%;
border: 1px solid red;
text-align: center;
#container > div
display: table-row;
width: 100%;
#container > div > div
display: table-cell;
width: 100%;
border-radius:10px;
#header > div
height:50px;
border:solid 2px #aaa;
#content > div
height: 100%;
background:#f0f4f0;
border:solid 2px #5a5;
#footer > div
height:50px;
border:solid 2px #a55;
jsFiddle.
【讨论】：
哦，是的，我想我可以 :) 那太棒了。感谢您的快速解决方案。 旧浏览器不太支持表格样式，如果这对您很重要的话。 好吧，这对我来说并不重要（无论如何我都需要 WebSockets），但如果有人想出一个替代答案，那可能会对其他人有所帮助。它可能会更好，并以积分的形式赢得一些爱。 @Beejamin 不幸的是，“多个绝对坐标”是实现此目的的好方法。这是你绝对定位一个盒子，然后给它顶部和底部坐标的时候。在不指定高度的情况下，您会得到一个距离其父项的顶部边缘 10px 和底部边缘 10px 的框。
Here's an example
如果您关心该浏览器，则需要添加 IE6 特定样式。
Here's an article 谈技术（加上 IE6 修复）- 知道它是一件好事，即使您不使用它来解决这个问题。
【讨论】：
嗯，实际上我认为这更好 - 更少的标记和没有像残余这样的特定表格。我太快推广答案了，所以我很抱歉，但我想我必须把它改成这个。没想到还有别的办法。 非常适合该应用程序（单屏聊天应用程序）。谢谢。 优秀的解决方案，想想就这么简单！ 哇！这实际上是一种更简单的方法！不错的答案！以上是关于css怎么让盒子固定的主要内容，如果未能解决你的问题，请参考以下文章