html - 由 div 控制的 anchor 高度

Question

我有以下 html:

<div class='mydiv'>
   <div id="one">
      <a href='#'>Link</a>  
   </div>
   <div id="two">
   </div>  
<div>

和以下 CSS:

div.mydiv {
  height: 200px; 
  width: 200px;
  background-color:red; 
}

 div.mydiv a { 
   display:block;
   color:yellow;
   background-color:green;
   height:100%;
 }

结果如下:

绿色区域是可点击的。无论如何我可以让它看起来像下面这样，只使用 CSS？

Answer 1

添加padding-bottom:100%

div.mydiv a { 
   display:block;
   color:yellow;
   background-color:green;
   height:100%;
   padding-bottom:100%;
 }

div.mydiv {
  height: 200px; 
  width: 200px;
  background-color:red; 
}

 div.mydiv a { 
   display:block;
   color:yellow;
   background-color:green;
   height:100%;
   padding-bottom:100%;
 }

<div class='mydiv'>
   <div id="one">
      <a href='#er'>Link</a>  
   </div>
   <div id="two">
   </div>  
<div>