Question

#nav {
  position: fixed;
  height: 100%;
  left: 0px;
  right: 0px;
  top: 0px;
  width: 10%;
  background-color: blue;
}

#nav>div {}

<html>
<div id="nav">
  <div>up</div>
  <div>down</div>
  <div>left</div>
  <div>right</div>
</div>

</html>

如何使#nav内的每个div显示在等于#nav长度的黄色框内，而不管div有多少'com.google.firebase:firebase-crash:10.2.0' ？

Answer 1

这就是你要找的东西吗？

#nav {
  position: fixed;
  height: 100%;
  left : 0px;
  right: 0px;
  top  : 0px;
  width: 10%;
  background-color: blue;
}

#nav div {
  background-color:yellow;
}

<div id="nav">
        <div>up</div>
        <div>down<div>
        <div>left</div>
        <div>right</div>
    </div>

Answer 2

尝试位置：相对于#nav和位置：绝对;宽度：100％为div＆＃39;

Answer 3

#nav {
  position: fixed;
  height: 100%;
  left : 0px;
  right: 0px;
  top  : 0px;
  width: 10%;
  background-color: blue;
}

#nav div {
  background-color:yellow;
  padding:10px;
  border: 1px solid black;

}

<div id="nav">
        <div>up</div>
        <div>down</div>
        <div>left</div>
        <div>right</div>
    </div>

Answer 4

你的问题模糊不清，但我对我发现的答案是：

＆＃13;

#nav {
  position: fixed;
  height: 100%;
  left : 0px;
  right: 0px;
  top  : 0px;
  width: 10%;
  background-color: blue;
}

#nav div {
  background-color: red;
  box-shadow : 0 0 3px 1px #000;
  box-sizing: border-box;
  text-align : center;
}

＆＃13;

<div id="nav">
        <div>up</div>
        <div>down<div>
        <div>left</div>
        <div>right</div>
    </div>

＆＃13;

Answer 5

试试这个

＆＃13;

#nav {
  position: fixed;
  height: 100%;
  left: 0px;
  right: 0px;
  top: 0px;
  width: 10%;
  background-color: blue;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

#nav>div {
    padding: 15px 10px;
    border: 1px solid aquamarine;
    background: yellow;
    height: 100%;
}

＆＃13;

<div id="nav">
    <div>up</div>
    <div>down</div>
    <div>left</div>
    <div>right</div>
</div>

＆＃13;

带阴影边框的每个div的导航选项卡

5 个答案: