絕對定位的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％

回答

相關問題