Question

In my assignment, I've been having a lot of issues lately with height:x%; it's not accurate when used in some parts of my code, such as this:

My <a> element, a child of <div>, has a child <img>. <a> has padding of %1, and 100 - 2(to make up for the added height from padding) = 98% height of <div>. Since I want the entire picture to be clickable as a link, I nest the <img> in the <a> element with 100% height and width to fit right in. So I'm thinking at this point, I should see a picture of a dog that at least fits in vertically. However I get this:

https://gyazo.com/0b36f8c7efa70d7dc2b6155c821e1b1e

的百分比高度

正如您所看到的，填充是正确的，宽度是，但高度不是。它延伸了<a>填充的两倍。我尝试从高度减去两倍填充，但它产生了非常小的差异。它还在外面。

div#top {
  width: 100%;
  height: 20vh;
  background-color: black;
  color: limegreen;
}
a#homeiconlink {
  width: 13%;
  height: 98%;
  padding: 1%;
  float: left;
}
img#homeicon {
  width: 100%;
  height: 100%;
}
h2#title {
  width: 85%;
  height: 100%;
  float: left;
}
h2 {
  margin: 0;
  font-family: Arial;
  font-variant: small-caps;
}
body {
  background-color: yellow;
}
div#sidebar {
  width: 15%;
  height: 60vh;
  background-color: green;
  float: left;
}
a {
  text-decoration: none;
  color: inherit;
}
a.sidebar:hover {
  background-color: limegreen;
  color: white;
}
a.sidebar {
  display: block;
  background-color: green;
  color: limegreen;
  padding: 2.5%;
}
div#contentspace {
  width: 85%;
  height: 60vh;
  margin: 0px;
  background-color: limegreen;
  color: white;
  float: left;
}
div#content {
  padding: 2.5%;
}
div#footerspace {
  width: 100%;
  height: 20vh;
}
footer {
  padding: 2.5%;
  clear: both;
  background-color: darkgreen;
  color: limegreen;
  margin: 0;
  text-align: center;
}
div#testedwith {
  font-style: italic;
  color: lightgray;
  text-align: right;
}

<div id="top">
  <a href="home.html" id="homeiconlink">
    <img src="dog.png" alt="logo" id="homeicon">
  </a>
  <h2 id="title">
    				Adopt a dog or cat Foundation
    			</h2>
</div>
<div id="sidebar">
  <a class="sidebar" href="home.html">Home page</a>
  <a class="sidebar" href="browse.html">Browse available pets</a>
  <a class="sidebar" href="find.html">Find a dog/cat</a>
  <a class="sidebar" href="dogcare.html">Dog Care</a>
  <a class="sidebar" href="catcare.html">Cat Care</a>
  <a class="sidebar" href="giveaway.html">Have a pet to give away</a>
  <a class="sidebar" href="contact.html">Contact us</a>
</div>
<div id="contentspace">
  <div id="content">
    <h2>
    					Welcome!
    				</h2>
    <br>
    <p>
      At Adopt a dog or cat foundation (TM), we strive to save as many endangered dogs and cats lives as possible from the animal pound. We invite all who are loving towards animals to adopt and care for a dog or cat of your choice from somebody who can no
      longer give them the care they deserve. We strive to maintain a good community, and have a good reputation for that. Any dog or cat you adopt will most certainly be a good companion and are well trained and disease free. Thank you for helping us
      shape the world into a more hospitable one!
      <br>
      <br>-AADOCF
    </p>
  </div>
</div>
<div id="footerspace">
  <footer>
    <a href="disclaimer.html">View disclaimer</a>
    <div id="testedwith">tested with Google Chrome</div>
  </footer>
</div>

Answer 1

在您的CSS中，添加box-sizing: border-box; a#homeiconlink {...}。

默认情况下，指定高度时，不会考虑边距，填充或边框。指定边框会更改此值，以便指定的高度为总高度。有关https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model和https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

的更多信息

<a> element not accurate to parent </a> <div> <a> height

1 个答案: