admin管理员组

文章数量:1401849

I am making a navigation bar for a website. I am doing this through the flex box system. The flexbox container has three different DIV elements, two of which have an A element and one with a p element inside as a placeholder for a future link. When I put a border on each div the divs with the A elements have a height smaller than the flex container, but the div with the h1 element has the correct height. How do I make the hieght of the Divs with the a tags the same as the parent flex container. Thanks a lot

Note: the flex container is the class="navigator"

Note: the main css tag that you guys need to focus on is the .navigator tag. Other ones just set some generic stuff.

body {
  background-image: url(Images/Marae_Inside.jpg);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wrapper {
  border-color: green;
  background-color: rgb(184, 241, 157);
  border-style: solid;
  border-width: 5px;
  margin: 5px;
}

.heading,
.footer,
.main,
.navigator,
.title {
  border-style: solid;
  border-width: 5px;
  margin: 10px;
  padding: 5px;
}

.navigator {
  display: flex;
  flex-direction: row;
  border: 5px solid black;
  align-items: center;
  padding: 0;

  div {
    border: 5px solid black;
    flex-grow: 3;
    text-align: center;

    a:link {
      text-decoration: none;
      color: black;
    }

    a:hover {
      text-decoration: underline;
      text-decoration-color: blue;
      color: black;
    }
  }
}

.heading {
  border-color: red;
  display: flex;

  h1 {
    padding-left: 50px;
  }
}

.footer {
  border-color: rgb(155, 155, 5);
}

.main {
  text-align: center;

  background-color: rgb(190, 230, 248);
}

.flex-container {
  display: flex;
  flex-direction: row;

  div {
    border: 5px groove rgb(68, 175, 247);
    padding: 10px;
  }
}

.navigator,
.heading,
.footer,
.title {
  background-color: whitesmoke;
}

.title {
  border-color: rgb(155, 155, 5);
  text-align: center;
}
!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Old Names</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapper">
    <div class="heading">
      <img src="Images\logo.png" alt="logo">
      <h1>logo name
    </div>
    <div class="navigator">
      <div><a href="index.html">Why Change?</a></div>
      <div><a href="old_names.html">Old Names</a></div>
      <div>
        <p>new names</p>
      </div>
    </div>
    <div class="title">
      <h2><strong>Old Names</strong></h2>
    </div>
    <div class="main">
      <div class="flex-container">
        <div>
          <img src="Images\The4Houses-BishopSelwyn.jpg" alt="Bishop Selwyn">
          <p>Cameron (Red)
            <br>Late on Saturday, February 20, 1864, Cameron and more than 1200 British troops moved past Paterangi without alerting lookout stations and suddenly appeared before the village of Rangiaowhia the next morning to attack.
            <br>The village’s men were away, prepared for a battle they believed was taking place near Paterangi, leaving the village and its occupants — women, children, the sick and the elderly defenceless.
            <br>Many were killed by gunfire and by fires being lit in whares and the church.
            <br>The colonial forces occupied the village and land, taking any resources that they could get their hands on.
            <br>Source: 
            <br>Cameron made every endeavour to make sure that while his master's wishes were obeyed the rules of ware were observed and if victory came without bloodshed, then his qualities as a tactician and strategist were justified.
            <br>Cameron placed his duty to his troops first, and achieved success with a minimum of casulaties.
            <br>Source: Otawhao - One Hundred Years On, page 47
          </p>
        </div>
        <div>
          <img src="Images\The4Houses-GeneralCameron.jpg" alt="General Cameron">
          <p>
            Selwyn (Yellow)
            <br> Bishop Gee Augustus Selwyn was the first Anglican Bishop of Diocese of New Zealand and was charged with misleading Rangiaowhia’s occupants to believe the village was safe and it was also claimed he blessed the troops involved in the massacre.
            <br>Source: 
            <br>He travelled both the North and South island anizing church outposts. He was well-informed on Maori rights and mediated in disputes between settlers and Maori.
            <br>Source: Otawhao - One Hundred Years On, page 46
          </p>
        </div>
        <div>
          <img src="Images\The4Houses-SirJohnGorst.jpg" alt="Sir John Gorst">
          <p>
            Gorst (Blue)
            <br>Sir Gee Gorst taught at a Maori boys’ school in Hopuhopu which fitted his opinion that in order to learn about and know the Maori people, men had to go and live amongst them. He became an inspector of mission schools in the Waikato and later became resident magistrate
            <br>Gorst wrote a book 'The Maori King', which is reckoned the finest book written on the 19th centry Maori. In this book he wrote with love and understanding of the Maori people as he knew them, and expressed from the heart his admiration for leaders such as Wiremu Tamihana and Te Oriori.
            <br>Source: Otawhao - One Hundred Years On, page 45
            <br>Gorst became an inspector of mission schools in the Waikato and later became resident magistrate in an attempt to bring Waikato tribes under British law
            <br>Source: 
          </p>
        </div>
        <div>
          <img src="Images\The4Houses-GeeMelrose.jpg" alt="Gee Melrose">
          <p>
            Melrose (Green)
            <br>Gee Baines Melrose was the first chairman of the district high school committee. He gave service to the people with who he loved and worked.
            <br>Source: Otawhao - One Hundred Years On, page 44
          </p>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>... <br> ... <br> ...</p>
    </div>
  </div>
</body>

</html>

I am making a navigation bar for a website. I am doing this through the flex box system. The flexbox container has three different DIV elements, two of which have an A element and one with a p element inside as a placeholder for a future link. When I put a border on each div the divs with the A elements have a height smaller than the flex container, but the div with the h1 element has the correct height. How do I make the hieght of the Divs with the a tags the same as the parent flex container. Thanks a lot

Note: the flex container is the class="navigator"

Note: the main css tag that you guys need to focus on is the .navigator tag. Other ones just set some generic stuff.

body {
  background-image: url(Images/Marae_Inside.jpg);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wrapper {
  border-color: green;
  background-color: rgb(184, 241, 157);
  border-style: solid;
  border-width: 5px;
  margin: 5px;
}

.heading,
.footer,
.main,
.navigator,
.title {
  border-style: solid;
  border-width: 5px;
  margin: 10px;
  padding: 5px;
}

.navigator {
  display: flex;
  flex-direction: row;
  border: 5px solid black;
  align-items: center;
  padding: 0;

  div {
    border: 5px solid black;
    flex-grow: 3;
    text-align: center;

    a:link {
      text-decoration: none;
      color: black;
    }

    a:hover {
      text-decoration: underline;
      text-decoration-color: blue;
      color: black;
    }
  }
}

.heading {
  border-color: red;
  display: flex;

  h1 {
    padding-left: 50px;
  }
}

.footer {
  border-color: rgb(155, 155, 5);
}

.main {
  text-align: center;

  background-color: rgb(190, 230, 248);
}

.flex-container {
  display: flex;
  flex-direction: row;

  div {
    border: 5px groove rgb(68, 175, 247);
    padding: 10px;
  }
}

.navigator,
.heading,
.footer,
.title {
  background-color: whitesmoke;
}

.title {
  border-color: rgb(155, 155, 5);
  text-align: center;
}
!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Old Names</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapper">
    <div class="heading">
      <img src="Images\logo.png" alt="logo">
      <h1>logo name
    </div>
    <div class="navigator">
      <div><a href="index.html">Why Change?</a></div>
      <div><a href="old_names.html">Old Names</a></div>
      <div>
        <p>new names</p>
      </div>
    </div>
    <div class="title">
      <h2><strong>Old Names</strong></h2>
    </div>
    <div class="main">
      <div class="flex-container">
        <div>
          <img src="Images\The4Houses-BishopSelwyn.jpg" alt="Bishop Selwyn">
          <p>Cameron (Red)
            <br>Late on Saturday, February 20, 1864, Cameron and more than 1200 British troops moved past Paterangi without alerting lookout stations and suddenly appeared before the village of Rangiaowhia the next morning to attack.
            <br>The village’s men were away, prepared for a battle they believed was taking place near Paterangi, leaving the village and its occupants — women, children, the sick and the elderly defenceless.
            <br>Many were killed by gunfire and by fires being lit in whares and the church.
            <br>The colonial forces occupied the village and land, taking any resources that they could get their hands on.
            <br>Source: https://www.tac.school.nz/recent-news/new-names-school-houses
            <br>Cameron made every endeavour to make sure that while his master's wishes were obeyed the rules of ware were observed and if victory came without bloodshed, then his qualities as a tactician and strategist were justified.
            <br>Cameron placed his duty to his troops first, and achieved success with a minimum of casulaties.
            <br>Source: Otawhao - One Hundred Years On, page 47
          </p>
        </div>
        <div>
          <img src="Images\The4Houses-GeneralCameron.jpg" alt="General Cameron">
          <p>
            Selwyn (Yellow)
            <br> Bishop Gee Augustus Selwyn was the first Anglican Bishop of Diocese of New Zealand and was charged with misleading Rangiaowhia’s occupants to believe the village was safe and it was also claimed he blessed the troops involved in the massacre.
            <br>Source: https://www.tac.school.nz/our-news/new-house-names-2022
            <br>He travelled both the North and South island anizing church outposts. He was well-informed on Maori rights and mediated in disputes between settlers and Maori.
            <br>Source: Otawhao - One Hundred Years On, page 46
          </p>
        </div>
        <div>
          <img src="Images\The4Houses-SirJohnGorst.jpg" alt="Sir John Gorst">
          <p>
            Gorst (Blue)
            <br>Sir Gee Gorst taught at a Maori boys’ school in Hopuhopu which fitted his opinion that in order to learn about and know the Maori people, men had to go and live amongst them. He became an inspector of mission schools in the Waikato and later became resident magistrate
            <br>Gorst wrote a book 'The Maori King', which is reckoned the finest book written on the 19th centry Maori. In this book he wrote with love and understanding of the Maori people as he knew them, and expressed from the heart his admiration for leaders such as Wiremu Tamihana and Te Oriori.
            <br>Source: Otawhao - One Hundred Years On, page 45
            <br>Gorst became an inspector of mission schools in the Waikato and later became resident magistrate in an attempt to bring Waikato tribes under British law
            <br>Source: https://www.tac.school.nz/our-news/new-house-names-2022
          </p>
        </div>
        <div>
          <img src="Images\The4Houses-GeeMelrose.jpg" alt="Gee Melrose">
          <p>
            Melrose (Green)
            <br>Gee Baines Melrose was the first chairman of the district high school committee. He gave service to the people with who he loved and worked.
            <br>Source: Otawhao - One Hundred Years On, page 44
          </p>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>... <br> ... <br> ...</p>
    </div>
  </div>
</body>

</html>

  • html
  • css
  • flexbox
Share Improve this question edited Mar 26 at 8:45 Matthew asked Mar 24 at 22:08 MatthewMatthew 136 bronze badges 1
  • You can try adding the property align-items: stretch; for the .navigator class. This will stretch the smaller children elements of the flex to match the height of the child with maximum height. But this will mis-align the text i.e a tags. For that you can either give styles to divs containing a links or you can add height styles to the a links directly. – Mohsin Murad Commented Mar 24 at 22:46
Add a comment  | 

3 Answers 3

Reset to default 2

In .navigator, change align-items: center for align-items: stretch and in the div inner .navigator add display: flex, align-items: center, justify-content: center.

body {
  background-image: url(Images/Marae_Inside.jpg);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wrapper {
  border-color: green;
  background-color: rgb(184, 241, 157);
  border-style: solid;
  border-width: 5px;
  margin: 5px;
}

.heading,
.footer,
.main,
.navigator,
.title {
  border-style: solid;
  border-width: 5px;
  margin: 10px;
  padding: 5px;
}

.navigator {
  display: flex;
  flex-direction: row;
  border: 5px solid black;
  align-items: stretch;
  padding: 0;

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid black;
    flex-grow: 3;
    text-align: center;

    a:link {
      text-decoration: none;
      color: black;
    }

    a:hover {
      text-decoration: underline;
      text-decoration-color: blue;
      color: black;
    }
  }
}

.heading {
  border-color: red;
  display: flex;

  h1 {
    padding-left: 50px;
  }
}

.footer {
  border-color: rgb(155, 155, 5);
}

.main {
  text-align: center;

  background-color: rgb(190, 230, 248);
}

.flex-container {
  display: flex;
  flex-direction: row;

  div {
    border: 5px groove rgb(68, 175, 247);
    padding: 10px;
  }
}

.navigator,
.heading,
.footer,
.title {
  background-color: whitesmoke;
}

.title {
  border-color: rgb(155, 155, 5);
  text-align: center;
}
<div class="wrapper">
  <div class="heading">
    <img src="Images\logo.png" alt="logo">
    <h1>logo name
  </div>
  <div class="navigator">
    <div><a href="index.html">Why Change?</a></div>
    <div><a href="old_names.html">Old Names</a></div>
    <div>
      <p>new names</p>
    </div>
  </div>
  <div class="title">
    <h2><strong>Old Names</strong></h2>
  </div>
  <div class="main">
    <div class="flex-container">
      <div>
        <img src="Images\The4Houses-BishopSelwyn.jpg" alt="Bishop Selwyn">
        <p>Cameron (Red)
          <br>Late on Saturday, February 20, 1864, Cameron and more than 1200 British troops moved past Paterangi without alerting lookout stations and suddenly appeared before the village of Rangiaowhia the next morning to attack.
          <br>The village’s men were away, prepared for a battle they believed was taking place near Paterangi, leaving the village and its occupants — women, children, the sick and the elderly defenceless.
          <br>Many were killed by gunfire and by fires being lit in whares and the church.
          <br>The colonial forces occupied the village and land, taking any resources that they could get their hands on.
          <br>Source: https://www.tac.school.nz/recent-news/new-names-school-houses
          <br>Cameron made every endeavour to make sure that while his master's wishes were obeyed the rules of ware were observed and if victory came without bloodshed, then his qualities as a tactician and strategist were justified.
          <br>Cameron placed his duty to his troops first, and achieved success with a minimum of casulaties.
          <br>Source: Otawhao - One Hundred Years On, page 47
        </p>
      </div>
      <div>
        <img src="Images\The4Houses-GeneralCameron.jpg" alt="General Cameron">
        <p>
          Selwyn (Yellow)
          <br> Bishop Gee Augustus Selwyn was the first Anglican Bishop of Diocese of New Zealand and was charged with misleading Rangiaowhia’s occupants to believe the village was safe and it was also claimed he blessed the troops involved in the massacre.
          <br>Source: https://www.tac.school.nz/our-news/new-house-names-2022
          <br>He travelled both the North and South island anizing church outposts. He was well-informed on Maori rights and mediated in disputes between settlers and Maori.
          <br>Source: Otawhao - One Hundred Years On, page 46
        </p>
      </div>
      <div>
        <img src="Images\The4Houses-SirJohnGorst.jpg" alt="Sir John Gorst">
        <p>
          Gorst (Blue)
          <br>Sir Gee Gorst taught at a Maori boys’ school in Hopuhopu which fitted his opinion that in order to learn about and know the Maori people, men had to go and live amongst them. He became an inspector of mission schools in the Waikato and later became resident magistrate
          <br>Gorst wrote a book 'The Maori King', which is reckoned the finest book written on the 19th centry Maori. In this book he wrote with love and understanding of the Maori people as he knew them, and expressed from the heart his admiration for leaders such as Wiremu Tamihana and Te Oriori.
          <br>Source: Otawhao - One Hundred Years On, page 45
          <br>Gorst became an inspector of mission schools in the Waikato and later became resident magistrate in an attempt to bring Waikato tribes under British law
          <br>Source: https://www.tac.school.nz/our-news/new-house-names-2022
        </p>
      </div>
      <div>
        <img src="Images\The4Houses-GeeMelrose.jpg" alt="Gee Melrose">
        <p>
          Melrose (Green)
          <br>Gee Baines Melrose was the first chairman of the district high school committee. He gave service to the people with who he loved and worked.
          <br>Source: Otawhao - One Hundred Years On, page 44
        </p>
      </div>
    </div>
  </div>
  <div class="footer">
    <p>... <br> ... <br> ...</p>
  </div>
</div>

By default,

elements have margin-top and margin-bottom, which increases the height of their parent container. Since the other elements contain elements (which don't have default margins), the height difference becomes noticeable.

.navigator p {
    margin: 0;
}

height:100% does not solve the problem since the navigation size is not fixed (it changes according to the margin)

Reason

You are mixing block elements with inline elements and expect them to behave the same.

Solution

Set exactly the same styles for each one of the items.

In the example, I made a behave the same way as p by setting it to display: block; and the same margin.
You can also do the opposite by making p inline and removing its margin.

body {
  background-image: url(Images/Marae_Inside.jpg);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.wrapper {
  border-color: green;
  background-color: rgb(184, 241, 157);
  border-style: solid;
  border-width: 5px;
  margin: 5px;
}

.heading,
.footer,
.main,
.navigator,
.title {
  border-style: solid;
  border-width: 5px;
  margin: 10px;
  padding: 5px;
}

.navigator {
  display: flex;
  flex-direction: row;
  border: 5px solid black;
  align-items: center;
  padding: 0;

  div {
    border: 5px solid black;
    flex-grow: 3;
    text-align: center;
    
    a{
      display: block;
      margin: 1em 0;
    }

    a:link {
      text-decoration: none;
      color: black;
    }

    a:hover {
      text-decoration: underline;
      text-decoration-color: blue;
      color: black;
    }
  }
}

.heading {
  border-color: red;
  display: flex;

  h1 {
    padding-left: 50px;
  }
}

.footer {
  border-color: rgb(155, 155, 5);
}

.main {
  text-align: center;

  background-color: rgb(190, 230, 248);
}

.flex-container {
  display: flex;
  flex-direction: row;

  div {
    border: 5px groove rgb(68, 175, 247);
    padding: 10px;
  }
}

.navigator,
.heading,
.footer,
.title {
  background-color: whitesmoke;
}

.title {
  border-color: rgb(155, 155, 5);
  text-align: center;
}
!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Old Names</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="wrapper">
    <div class="heading">
      <img src="Images\logo.png" alt="logo">
      <h1>logo name
    </div>
    <div class="navigator">
      <div><a href="index.html">Why Change?</a></div>
      <div><a href="old_names.html">Old Names</a></div>
      <div>
        <p>new names</p>
      </div>
    </div>
    <div class="title">
      <h2><strong>Old Names</strong></h2>
    </div>
    <div class="main">
      <div class="flex-container">
        <div>
          <img src="Images\The4Houses-BishopSelwyn.jpg" alt="Bishop Selwyn">
          <p>Cameron (Red)
            <br>Late on Saturday, February 20, 1864, Cameron and more than 1200 British troops moved past Paterangi without alerting lookout stations and suddenly appeared before the village of Rangiaowhia the next morning to attack.
            <br>The village’s men were away, prepared for a battle they believed was taking place near Paterangi, leaving the village and its occupants — women, children, the sick and the elderly defenceless.
            <br>Many were killed by gunfire and by fires being lit in whares and the church.
            <br>The colonial forces occupied the village and land, taking any resources that they could get their hands on.
            <br>Source: https://www.tac.school.nz/recent-news/new-names-school-houses
            <br>Cameron made every endeavour to make sure that while his master's wishes were obeyed the rules of ware were observed and if victory came without bloodshed, then his qualities as a tactician and strategist were justified.
            <br>Cameron placed his duty to his troops first, and achieved success with a minimum of casulaties.
            <br>Source: Otawhao - One Hundred Years On, page 47
          </p>
        </div>
        <div>
          <img src="Images\The4Houses-GeneralCameron.jpg" alt="General Cameron">
          <p>
            Selwyn (Yellow)
            <br> Bishop Gee Augustus Selwyn was the first Anglican Bishop of Diocese of New Zealand and was charged with misleading Rangiaowhia’s occupants to believe the village was safe and it was also claimed he blessed the troops involved in the massacre.
            <br>Source: https://www.tac.school.nz/our-news/new-house-names-2022
            <br>He travelled both the North and South island anizing church outposts. He was well-informed on Maori rights and mediated in disputes between settlers and Maori.
            <br>Source: Otawhao - One Hundred Years On, page 46
          </p>
        </div>
        <div>
          <img src="Images\The4Houses-SirJohnGorst.jpg" alt="Sir John Gorst">
          <p>
            Gorst (Blue)
            <br>Sir Gee Gorst taught at a Maori boys’ school in Hopuhopu which fitted his opinion that in order to learn about and know the Maori people, men had to go and live amongst them. He became an inspector of mission schools in the Waikato and later became resident magistrate
            <br>Gorst wrote a book 'The Maori King', which is reckoned the finest book written on the 19th centry Maori. In this book he wrote with love and understanding of the Maori people as he knew them, and expressed from the heart his admiration for leaders such as Wiremu Tamihana and Te Oriori.
            <br>Source: Otawhao - One Hundred Years On, page 45
            <br>Gorst became an inspector of mission schools in the Waikato and later became resident magistrate in an attempt to bring Waikato tribes under British law
            <br>Source: https://www.tac.school.nz/our-news/new-house-names-2022
          </p>
        </div>
        <div>
          <img src="Images\The4Houses-GeeMelrose.jpg" alt="Gee Melrose">
          <p>
            Melrose (Green)
            <br>Gee Baines Melrose was the first chairman of the district high school committee. He gave service to the people with who he loved and worked.
            <br>Source: Otawhao - One Hundred Years On, page 44
          </p>
        </div>
      </div>
    </div>
    <div class="footer">
      <p>... <br> ... <br> ...</p>
    </div>
  </div>
</body>

</html>

本文标签： htmlBorders of Div element are not the height of the flex boxStack Overflow

版权声明：本文标题：html - Borders of Div element are not the height of the flex box - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744226263a2596104.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。