html - 絶対divを親の幅/パディングに合わせるには?

Question

#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%;
}

上記は、何が起こっているかのイメージです。緑はパディングで、青は収まるはずのコンテンツ領域です (濃い青は#panel、コンテンツ領域に収まるようにしようとしている実際の div () です)。これは絶対に無視しているので、これを回避する方法を探していると思います。

フィドル: http://jsfiddle.net/qTJhW/

ありがとう

Answer 1

あなたがしていることの問題は、パディングを含む幅全体を取り、パディングの左側の幅に合わせていることです。これは、相対位置を持つラッパーを使用して修正できます。#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;
}

以下に例を示します: http://codepen.io/DanielVoogsgerd/pen/Lezjy

Answer 2

calc次のように使用できます。

width: calc(100% - Padding)