パディングを無視した絶対配置

パディングを持つ親divの下にあるボタンを使用してdivを配置しようとしています。パディングを無視した絶対配置

期待される結果は、パディング（緑色領域）の上にボタン休止を有しています。

.btn-default, 
 
.btn-default:hover, 
 
.btn-default:focus { 
 
    color: #333; 
 
    text-shadow: none; 
 
    /* Prevent inheritence from `body` */ 
 
    background-color: #fff; 
 
    border: 1px solid #fff; 
 
} 
 
a, 
 
a:focus, 
 
a:hover { 
 
    color: #fff; 
 
} 
 
body { 
 
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url("../img/blank.jpg"); 
 
    background-attachment: fixed; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    background-position: center top; 
 
} 
 
html, 
 
body { 
 
    height: 100%; 
 
} 
 
body { 
 
    color: #fff; 
 
    text-align: left; 
 
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5); 
 
} 
 
#mcontainer { 
 
    position: relative; 
 
    float: left; 
 
    padding: 10%; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#header h1 { 
 
    margin: 0px; 
 
} 
 
#header { 
 
    height: auto; 
 
} 
 
#footer .link-item a { 
 
    display: table-cell; 
 
    padding: 10px 10px; 
 
    border: 2px solid white; 
 
} 
 
#footer { 
 
    position: absolute; 
 
    top: auto; 
 
    bottom: 0%; 
 
    height: auto; 
 
} 
 
#footer .link-item:first-child { 
 
    border-spacing: 0px 10px; 
 
    margin: 10px 10px 10px 0px; 
 
} 
 
#footer .link-item { 
 
    border-spacing: 0px 10px; 
 
    margin: 10px 10px; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<body> 
 
    <div id="mcontainer"> 
 

 
    <div id="header"> 
 
     <h1>Text</h1> 
 
    </div> 
 

 
    <div id="footer"> 
 
     <span class="link-item"><a href="www.google.com" target="new">Button</a> </span> 
 
     <span class="link-item"><a href="www.google.com" target="new">Button</a> </span> 
 
     <span class="link-item"><a href="www.google.com" target="new">Button</a> </span> 
 
     <span class="link-item"><a href="www.google.com" target="new">Button</a> </span> 
 
     <span class="link-item"><a href="www.google.com" target="new">Button</a> </span> 
 
    </div> 
 

 
    </div> 
 
</body> 
 

 
</html>

任意の助けいただければ幸いです。

出典

2016-05-26 Mark B

を_ "期待される結果が上のボタンの休憩をしています（緑色の領域）。 "_ - あなたの期待は間違っています。絶対配置では、埋め込みが考慮されません。あなたの要素が持つパディングの量を知っているなら、あなたの 'bottom'の位置にその値を使用してください。 – Turnip

Ok cool。それは私の疑惑を確認します。私が望むものを達成するためのベストプラクティスはありますか？「フッタ」の底を確認する必要はありませんか？私の目標は、ページの真ん中にテキストを、下にボタンを置いてコンテナを置くことです。私はパディングが行く方法だったという印象を受けました。 –

@Turnipの提案に完全に不満があります。 inbox.google.comとそのサイドナビゲーションをご覧ください。 Absolute for DIVのためにパディングが追加されていますが、Firefoxでは動作しません –

絶対配置では埋め込みが考慮されません。考えられる解決策は.mcontainerの内側に別のコンテナを追加することです。これにはposition: relativeも含まれています。このようにして、内側のコンテナはパディングを尊重し、絶対配置された要素は内側のコンテナの底になります。

出典

2016-05-26 13:08:50

エレガントでシンプルです。ありがとう –

あなたがここに二つの問題があります。

創刊

あなたのボタンは絶対的ですが、相対的な配置が設定されている最初の親要素がmcontainer要素です。したがって、ボタンはこの要素に対してのみ絶対的なものになります。

mcontainer要素からposition:relativeを削除し、body要素を相対位置に設定します。

第二の問題

カブが指摘したとおり、パディングは、絶対位置のために考慮されません。したがって、ボタンコンテナにとleftスタイリングを設定することでこれを相殺します。

フィドルを参照してください：https://jsfiddle.net/6smpvqq8/1/

出典

2016-05-26 13:09:32

私は結果を取得するために少しはJavaScriptを使用します。

https://jsfiddle.net/ducfilan/p961moLd/

$(".table_wide").each(function(){ 
 
    var paddingInPx = 10; 
 
    var windowWidthInPx = $(window).width(); 
 
    
 
    // Calculate the width of table. 
 
    var thisWidthInPercent = 100 - (100/windowWidthInPx*2*paddingInPx); 
 
    
 
    // Create an empty div to fill up the space the absolute table occupied in the past. 
 
    $(this).after('<div style="height: ' + this.offsetHeight + 'px;"></div>'); 
 
    $(this).wrap('<div style="position: absolute; width: ' + thisWidthInPercent + '%; left: ' + paddingInPx + 'px"></div>'); 
 
});

body { 
 
    background-color: #FDE3A7; 
 
} 
 

 
#wrapper { 
 
    width: 500px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
.table_wide { 
 
    display: block; 
 
    overflow: auto; 
 
} 
 

 
table, th, td { 
 
    border: solid 1px #000; 
 
} 
 

 
th { 
 
    background: #1E8BC3; 
 
    color: #fff; 
 
    font-weight: 700; 
 
}

<div id="wrapper"> 
 
    <div class="other_elements"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.</p> 
 
    </div> 
 
    
 
    <table class="table_wide"> 
 
    <thead> 
 
     <tr> 
 
     <th>#</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     <th>Table heading</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <th scope="row">1</th> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row">2</th> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     </tr> 
 
     <tr> 
 
     <th scope="row">3</th> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     <td>Table cell</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
    
 
    <div class="other_elements"> 
 
    <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh.</p> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

出典

2017-05-18 08:10:25

パディングを無視した絶対配置

答えて

関連する問題