我需要将定位设置为绝对,所以我可以将#bottom固定在屏幕的底部.我还需要适应容器#panel的宽度/填充.当我将位置设置为绝对时,宽度只是填满整个屏幕的宽度,我该如何阻止它？我需要#bottom以适应#panel的宽度/填充.
HTML：
<div id="panel">
<div id="bottom">
<div class="update"></div>
</div>
</div>
CSS：
#panel {
width: 21.25%;
height: 100%;
background-color: #0794ea;
float: left;
padding: 0 1.5%;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
.update {
width: 100%;
background-color: #006699;
text-align: center;
height: 56px;
color: white;
}
#bottom {
position: absolute;
bottom: 20px;
width: 100%;
}
以上是正在发生的事情的图像.绿色是填充,蓝色是它应该适合的内容区域(深蓝色是我试图适应内容区域的实际div(#panel)).我在假设,因为它是绝对的,它忽略了这一点,我正在寻找一种方法来解决这个问题.
小提琴：http://jsfiddle.net/qTJhW/
谢谢
解决方法
你正在做的问题是它采取包括填充在内的整个宽度并将其与填充的左侧宽度对齐.您可以通过使用具有相对位置的包装来解决此问题.另外不要忘记使#panel位置相对.
你最终得到的代码是这样的：
<div id="panel">
<div class="wrapper">
<div id="bottom">
<div class="update">
a
</div>
</div>
</div>
</div>
而CSS：
#panel {
width: 21.25%;
height: 100%;
background-color: #0794ea;
float: left;
padding: 0 1.5%;
Box-sizing: border-Box;
}
.update {
width: 100%;
background-color: #006699;
text-align: center;
height: 56px;
color: white;
}
.wrapper {
position: relative;
height: 100%;
}
#bottom {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
background: yellow;
}
