锚点高度由 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

我不太明白你的要求，但如果你想让整个事情都变成绿色，那么这就可以了：

全区联动

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

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

Answer 3

您还需要将 height: 100% 分配给 #one，因为 link 是 #one

的子项

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;
}

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

锚点高度由 div 控制

Anchor height controlled by div

html

css

anchor