锚高度由div控制

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>

Answer 2

我不会安静地理解你所要求的东西，但是如果你想把整个事情变成绿色那么这就可以了：

整个区域已链接

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您只需将height: 100%分配给#one，因为该链接是#one的孩子

＆＃13;

＆＃13;

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

#one, div.mydiv a {
  height: 100%;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;