CODEWITHSUNDEEP
htmlcssanchor
Heinevolder
Heinevolder

Reputation: 338

Anchor height controlled by div

I have the following html:

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

and the following CSS:

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

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

This gives the following result:

Image 1

The green area is clickable. Is there anyway i can make it look like the following, only using CSS?

enter image description here

Upvotes: 0

Views: 43

Answers (3)

Michael Coker
Michael Coker

Reputation: 53674

You just need to also assign height: 100% to #one since the link is a child of #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>

Upvotes: 0

Hassan Zia
Hassan Zia

Reputation: 330

I don't quiet understand what you are asking for, but if you want to make whole thing green then this would do the job:

whole area is linked

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>

Upvotes: 0

Anonymous
Anonymous

Reputation: 1990

Add 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>

Upvotes: 1

Related Questions