绝对定位忽略填充

时间：2016-05-26 12:59:43

标签： html css

我正在尝试使用带有填充的父div底部的按钮来定位div。

current result

预期的结果是按钮位于衬垫顶部（绿色区域）。

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

任何帮助都将不胜感激。

4 个答案:

答案 0 :(得分：12)

绝对定位不考虑填充。一种可能的解决方案是在.mcontainer内添加另一个容器，该容器也有position: relative。这样，内部容器将尊重填充，绝对定位元素将位于内部容器的底部。

答案 1 :(得分：4)

这里有两个问题：

第一期

您的按钮是绝对的，但具有相对定位的第一个父元素是mcontainer元素。因此，按钮只对该元素是绝对的。

从mcontainer元素中删除position:relative，并将body元素设置为具有相对定位。

第二期

正如Turnip指出的那样，填充并没有考虑绝对定位。因此，通过为按钮容器设置负bottom和left样式来抵消此错误。

请参阅小提琴：https://jsfiddle.net/6smpvqq8/1/

答案 2 :(得分：0)

我使用一点点javascript来获取结果：

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

＆＃13;
＆＃13; 
$(".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>');
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我希望这是您的预期结果，您只需要替换此 CSS 代码：

#footer {
  position: absolute;
  top: auto;
  bottom: 0%;
  height: auto;
  padding: inherit;
  left: 0;
  right: 0;
}


.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;
  padding: inherit;
  left: 0;
  right: 0;
}
#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>

相关问题
最新问题