Question

我几乎可以肯定这将是一个明确的答案，但我遇到的麻烦就是放在哪里，或者如何理解它。

我在div中有div，而这个特殊的（sectioncut）正在考虑它的堂兄ul（subnav）的高度。我已经尝试将ul封装在自己的div中，但我不能理解它的位置和清晰度。

这是我第一次在Stackoverflow上发帖，所以欢迎任何反馈= D

http://jsfiddle.net/JustJinxed/d62eLh4o/

HTML

<div id="pagecut">
  <div id="pagebg">
    <div id="nav">
      <ul id="subnav">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      </ul>
      <div id="sectioncut">
        This is a test. 
      </div>
    </div>
  </div>
</div>

CSS：

body,html { 
    border: 0px;
    margin: 0px;
    height: 100%;
    background-color: #2200FF;

}

#pagecut {
    width: 95%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0;
    margin-bottom: 0;
    background-color: #2200FF;
    outline-style: solid;
    outline-color:#FF0004;


}

#pagebg {
    width: 100%;
    height: 100%;   
    margin-left: auto;
    margin-right: auto;
    background:url(Img/bg1.png);
    background-size: 100% auto;
    background-repeat:no-repeat;
}


#nav {
    width: 98%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    outline-style: solid;
    outline-color:#00FF00;
}

#subnav {
    margin: 0px;
    padding: 0px;
}

#subnav li {
    display:inline;
    background-color: #7DA5EB;
    border-color: #7DA5EB;
    color: #FFF;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    border-style: solid solid none;
    padding-right: 7px;
    padding-left: 7px;
    margin-left: 2px;
    margin-right: 2px; 
    font-size: x-large;
}

#sectioncut {
    height: 100%;
    background-color: #7DA5EB;
}

Answer 1

如果我理解正确，你的问题是#sectioncut正在溢出它的容器，因为它占据整个容器的高度并被容器内的另一个div（#subnav）向下推。

如果这是问题，并且您只想填充subnav div留下的空间，我认为How can I make a DIV take up the rest of the height of a container div?会对您有帮助。

这是我第一次回答，所以我希望我做得对，这对你有帮助。

如何保持sub div不考虑其堂兄的身高？

1 个答案: