绝对定位的div上的高度为100％

我在我的WP网站中创建的帖子有响应'单元格'。绝对定位的div上的高度为100％

HTML

<article> 

    <div id="post-<?php the_ID(); ?>" <?php post_class('row'); ?> > 

     <div class="col-md-12"> 
      <div class="text-cell"> 
       <h1><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h1> 
       <h3><?php the_category(' '); ?></h3> 
      </div> 
     </div> 

    </div> 
    <!-- /#post --> 

</article>

CSS

article { 
    position: relative; 
    margin: 0; 
    padding: 18% 0; 
} 

.text-cell { 
    position: absolute; 
    height: 100%; 
    width: 30%; 
    top: 0; 
    left: 0; 
    background-color: #fff; 
}

我不希望 '文章' 有一组高度如果可能的话（我用的填充，以创建一个动态的高度'article'）

我想要'文本单元格'为文章的全高和宽度的30％。直到它的移动，它将是全宽和30％的高度。 100％的高度似乎不起作用。

visual ex。 enter image description here

来源

2015-05-11 user3550879

[Set absolute 100％on absolute div]（http://stackoverflow.com/questions/14217783/set-height-100-on-absolute-div） –

您当前的代码不工作吗？ http://jsfiddle.net/fzwqn3uh/2/ – Huangism

我认为应该，但我的'背景颜色'不显示。但我希望它能像你的小提琴一样工作 – user3550879

尝试增加bottom到您的定位方案：

.text-cell { 
    position: absolute; 
    /* height: 100%; <-- remove this */ 
    width: 30%; 
    bottom: 0; /* <-- add this */ 
    top:0; 
    left:0; 
    background-color: #fff; 
}

如果不工作比有与.col-md-12 DIV的高度或article DIV的问题。

来源

2015-05-11 17:41:46

css增加了底部，它不起作用，'.col-md-12 '是一个引导函数，它只能创建列（不处理高度），这是文章的唯一样式。 'text-cell'内的文本是垂直居中的，但背景根本不显示（指示高度问题） – user3550879

绝对定位的div上的高度为100％

回答

相关问题