使锚标签占div的100%

Question

我希望“主页”和“历史记录”选项卡占据底部的 100% div，但是当我在 css 中输入 100% 时，它会被剪掉。我还希望隐藏溢出，因此使其可见不是解决方案。

.bottom {
    background-color: red;
    width: 100%;
    max-width: 3000px;
    max-height: 200px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-style: solid;
}
.navBottom{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;

}   
.navBottom a {
  color: white;
  text-align: center;
  padding: 1vh 50px;
  max-height: 200px;
  text-decoration: none;
  font-size: 1.8vh;
  border-right: 2px solid black;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}

<div class="bottom">
        <div class="navBottom">
        <a href="../index.html">Home</a>
        <a href="history.html">History</a>
      </div>
        </div>

Answer 1

两件事。

我认为在填充和字体大小中使用 rem 或 em 单位会更好。
对于 100% - 当您执行 100% 时，它不是屏幕的 100%，而是父容器的 100%。尝试将 body 元素设置为 full-screen 大小，然后将 bottom 和 navBottom 设置为 100%。

body{
    width: 100vw;
}

Answer 2

我没有正确理解你的问题，但也许这可以解决问题。

.bottom {
    background-color: red;
    width: 100%;
    max-width: 3000px;
    max-height: 200px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    border-style: solid;
}
.navBottom{
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    width:100%;
}   
.navBottom a {
  width: 100%;
  color: white;
  text-align: center;
  padding: 1vh 50px;
  max-height: 200px;
  text-decoration: none;
  font-size: 1.8vh;
  border-right: 2px solid black;
  text-shadow: #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px,   #000 0px 0px 1px,   #000 0px 0px 1px, #000 0px 0px 1px, #000 0px 0px 1px;
}

<div class="bottom">
        <div class="navBottom">
        <a href="../index.html">Home</a>
        <a href="history.html">History</a>
      </div>
        </div>

使锚标签占div的100%

Make anchor tag take up 100% of div

html

css

anchor