内部h2需要100%的高度

Question

我正在构建我的第一个drupal网站，我有一些CSS问题，因为html不能更改。我想这是我需要做的小调整，但我看不出来.我希望链接标签具有100%的宽度和高度，这样每当您单击容器(而不仅仅是标题或阅读更多链接)时，您就可以看到博客项目详细信息页。

我简化了Drupal代码。我还创建了一个小型JSfiddle

HTML

<div class="node-blog-entry" id="node-10">
  <h2><a href="/drupal/blog/2nd-blog-item">2nd blog item</a></h2>

  <div class="submitted">          
    <span>Submitted by root on 20 November, 2013 - 19:43</span>    
  </div>

  <div class="content">
    <div class="field-name-body">
      <div class="field-items">
        <div class="field-item even">            
          <p>blablablab</p>
        </div>
      </div>
    </div> 
  </div>

  <ul class="links inline">
    <li class="node-readmore first last"><a href="">Read more</a></li>
  </ul> 
</div>

CSS

.node-blog-entry
{
margin-bottom: 15px;
width: 100%;
max-height: 9999px;
padding: 3% 0;
background-color: lightblue;
}
.node-blog-entry:hover
{
    background-color: rgba(240,240,240,1);
}
.node-blog-entry > *
{
padding:0 3%;
}
.node-blog-entry h2
{
display:block;
background-color: grey;
width: 94%;
min-height: 94%;
color: rgba(68,68,68,1);
}
.node-readmore
{
list-style:none;
float:right;
}

谢谢你，房协。

Answer 1

您可以使用position:absolute完成这一任务，并使整个容器成为他的亲生父级：

.node-readmore {
  list-style:none;
  float:right;
}

.node-blog-entry {
  position:relative;
 }
.node-blog-entry .node-readmore a{
  position:absolute;
  text-align:right;
  width:100%;
  height:100%;
  top:0px;
  left:0px;
}

这里的一个例子，http://jsfiddle.net/Y5HNF/4/

这里的问题是，您折衷了a标记上文本的位置。您可以使用其他属性(如box-sizing和padding )修复它。