溢出：对于具有明确高度

时间：2016-11-23 23:42:11

标签： html css html5 css3

在我一直在玩的移动菜单中，我遇到了一个问题，即jQuery的slideToggle动画是跳跃的，尽管为元素设置了明确的宽度和高度。我发现另一个可能解决的问题是在切换的div上设置overflow: hidden。那是我遇到这个问题的时候，我认为这至少导致了我的slideToggle问题：

我注意到在我的导航栏上设置overflow-y: hidden似乎会在不应该的时候切断它。鉴于导航正常渲染为240px高，如果我将导航设置为height: 240px; overflow: hidden，我预计不会有溢出隐藏。实际发生的事情是它在Chrome中切断了大约102px，而在Firefox中根本没有显示出来。

我尝试在样式表中设置CSS，并通过计算导航内容的高度动态地在JS中设置CSS。我试过clearfixing导航。我试过把它包装成div。我尝试了display的各种方法。似乎没什么用。

我的问题很简单：nav的高度怎么样？我不理解的是什么？

请注意，设置min-height确实有效，但这显然会干扰slideToggle效果，也无法真正回答我为什么只使用height无效的问题。

有关代码，请参阅http://codepen.io/cjl750/pen/xRdoRW。

$('header span').click(function(){
  $('nav').slideToggle(400);
});
html {
  font-family: 'Raleway', sans-serif;
}
header {
  background-color: mediumaquamarine;
  padding: 5px 15px;
}
nav {
  font-family: 'Oswald', sans-serif;
  color: white;
  overflow-y: hidden;
  /*   display: none; */
  height: 240px;
}
#body {
  width: 360px;
  height: 616px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
main {
  background-color: slategray;
  display: flex;
  flex-direction: column;
}
section, aside {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}
section {
  background-color: powderblue;
}
aside {
  background-color: cadetblue;  
}
h1, h2, h3 {
  font-weight: 400;
}
h2 {
  font-size: 1.33em;
}
#slogan {
  font-size: 2em;
  font-weight: 900;
  float: left;
}
header span {
  float: right;
  margin-top: 5px;
}
header span:hover {
  cursor: pointer;
  text-decoration: underline;
}
nav ul {
  list-style-type: none;
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
}
nav ul li + ul {
  display: none;
}
nav ul.topLvl li {
  padding: 2.5px 0 2.5px 15px;
  background-color: rgba(220,220,220,0.7);
  border: 3px outset rgba(255,255,255,0.65);
  border-top-style: inset;
  border-right-style: inset;
  border-right-width: 4.5px;
  border-bottom-color: rgba(255,255,255,1);
  border-left-width: 4.5px;
}
nav ul.topLvl li:first-of-type {
  border-top-width: 4.5px;
}
nav ul.topLvl li:last-of-type {
  border-bottom-width: 4.5px;
}
nav ul.topLvl li:hover {
  background-color: rgba(220,220,220,0.80);
  border-top-style: outset;
  border-right-style: outset;
  border-bottom-style: inset;
  border-left-style: inset;
  border-bottom-color: rgba(255,255,255,0.45);
  border-top-color: rgba(255,255,255,0.45);
}
<div id="body">
  <header>
    <div id="slogan">Octavian</div>
    <span>Menu</span>
  </header>
  <nav>
    <ul class="topLvl">
      <li>Giraffes</li>
      <ul class="secondLvl">
        <li>Tall</li>
        <li>Spots</li>
        <li>Weird horn things</li>
        <li>Head-whacking battles</li>
      </ul>
      <li>Elephants</li>
      <ul class="secondLvl">
        <li>Real big</li>
        <li>Eat lots of plants</li>
        <li>Floppy ears</li>
        <li>Get feet stuck in tires</li>
      </ul>
      <li>Cheetas</li>
      <ul class="secondLvl">
        <li>Spots</li>
        <li>Real fast</li>
        <li>Tire out quickly</li>
        <li>Gazelle's arch nemesis</li>
      </ul>
      <li>Vultures</li>
      <ul class="secondLvl">
        <li>Ominous death circle</li>
        <li>Super gnarley stoach acid</li>
        <li>Flap, flap, flap</li>
        <li>Big wingspan</li>
      </ul>
      <li>Zebras</li>
      <ul class="secondLvl">
        <li>Stripy horses</li>
        <li>Black and white</li>
        <li>Neeeeeiiiiiigh</li>
        <li>Big herds</li>
      </ul>
    </ul>
  </nav>
  <main>
    <section>
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum iaculis scelerisque. Nulla ligula nibh, venenatis a leo vel, varius tincidunt magna. Nulla consequat justo at lacus sodales ornare. Aenean quis faucibus est.</p>
      <p><em>Ut dapibus id justo tempor iaculis. Vestibulum elementum quis diam a consectetur. Nunc pellentesque purus sapien.</em></p>
      <p>Phasellus volutpat felis id libero bibendum euismod. Donec urna eros, euismod quis nisl cursus, placerat ultricies nulla. Vivamus finibus neque sit amet vestibulum posuere. Sed euismod, justo nec varius lacinia, tellus eros suscipit velit, sit amet dignissim leo nisi aliquet augue.</p>
      <h3>Fusce sagittis eleifend enim</h3>
      <p>Egestas sollicitudin. Nam at dui vel risus bibendum fringilla.</p>
      <p>Mauris tincidunt nunc lorem, vel mollis sapien sollicitudin id. Nunc aliquam nulla enim, sit amet porta quam euismod a. Sed varius vel ligula quis laoreet. Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium turpis elit, eu auctor velit suscipit non.</p>
    </section>
    <aside>
      <h2>Dulce et decorum est</h2>
      <p>Mauris sit amet eleifend tortor. Praesent vitae aliquam turpis. Quisque auctor maximus ante ac fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel fermentum lacus.</p>
      <ul>
        <li>cras feugiat justo non lacus auctor</li>
        <li>eget sollicitudin mi eleifend</li>
        <li>quisque pulvinar pretium risus et accumsan</li>
        <li>praesent lacus sapien</li>
      </ul>
      <p>Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </aside>
  </main>
  <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,900" rel="stylesheet">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

2 个答案:

答案 0 :(得分：3)

你的问题似乎是你身上有弹性箱的事实。 这似乎是“混淆”.slideToggle（），因为当flexbox以非常特殊的方式处理高度时（将flex-items的高度动态调整到它们各自的行）。

当您尝试显示单列布局时，这不是必需的。你可以直接给身体的直接孩子宽度为100％。

这是一个有效的jsFiddle：https://jsfiddle.net/1qrgg695/2/

我从身体上取下了弯曲。 标题行为很奇怪，所以标题现在是flex：

header {
  display: flex;
  justify-content:space-between;
}

对齐内容确保标题保持在左侧，切换到右侧。

答案 1 :(得分：2)

Flex项目默认为flex。您可以使用

防止收缩 
nav {
  flex-shrink: 0;
}

您还可以使用flex或flex: none等flex: 0 0 240px速记属性。

$('header span').click(function(){
  $('nav').slideToggle(400);
});
html {
  font-family: 'Raleway', sans-serif;
}
header {
  background-color: mediumaquamarine;
  padding: 5px 15px;
}
nav {
  font-family: 'Oswald', sans-serif;
  color: white;
  overflow-y: hidden;
  /*   display: none; */
  height: 240px;
  flex-shrink: 0;
}
#body {
  width: 360px;
  height: 616px;
  overflow-y: scroll;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
main {
  background-color: slategray;
  display: flex;
  flex-direction: column;
}
section, aside {
  width: 100%;
  box-sizing: border-box;
  padding: 0 20px;
}
section {
  background-color: powderblue;
}
aside {
  background-color: cadetblue;  
}
h1, h2, h3 {
  font-weight: 400;
}
h2 {
  font-size: 1.33em;
}
#slogan {
  font-size: 2em;
  font-weight: 900;
  float: left;
}
header span {
  float: right;
  margin-top: 5px;
}
header span:hover {
  cursor: pointer;
  text-decoration: underline;
}
nav ul {
  list-style-type: none;
  font-size: 1.5rem;
  margin: 0;
  padding: 0;
}
nav ul li + ul {
  display: none;
}
nav ul.topLvl li {
  padding: 2.5px 0 2.5px 15px;
  background-color: rgba(220,220,220,0.7);
  border: 3px outset rgba(255,255,255,0.65);
  border-top-style: inset;
  border-right-style: inset;
  border-right-width: 4.5px;
  border-bottom-color: rgba(255,255,255,1);
  border-left-width: 4.5px;
}
nav ul.topLvl li:first-of-type {
  border-top-width: 4.5px;
}
nav ul.topLvl li:last-of-type {
  border-bottom-width: 4.5px;
}
nav ul.topLvl li:hover {
  background-color: rgba(220,220,220,0.80);
  border-top-style: outset;
  border-right-style: outset;
  border-bottom-style: inset;
  border-left-style: inset;
  border-bottom-color: rgba(255,255,255,0.45);
  border-top-color: rgba(255,255,255,0.45);
}
<div id="body">
  <header>
    <div id="slogan">Octavian</div>
    <span>Menu</span>
  </header>
  <nav>
    <ul class="topLvl">
      <li>Giraffes</li>
      <ul class="secondLvl">
        <li>Tall</li>
        <li>Spots</li>
        <li>Weird horn things</li>
        <li>Head-whacking battles</li>
      </ul>
      <li>Elephants</li>
      <ul class="secondLvl">
        <li>Real big</li>
        <li>Eat lots of plants</li>
        <li>Floppy ears</li>
        <li>Get feet stuck in tires</li>
      </ul>
      <li>Cheetas</li>
      <ul class="secondLvl">
        <li>Spots</li>
        <li>Real fast</li>
        <li>Tire out quickly</li>
        <li>Gazelle's arch nemesis</li>
      </ul>
      <li>Vultures</li>
      <ul class="secondLvl">
        <li>Ominous death circle</li>
        <li>Super gnarley stoach acid</li>
        <li>Flap, flap, flap</li>
        <li>Big wingspan</li>
      </ul>
      <li>Zebras</li>
      <ul class="secondLvl">
        <li>Stripy horses</li>
        <li>Black and white</li>
        <li>Neeeeeiiiiiigh</li>
        <li>Big herds</li>
      </ul>
    </ul>
  </nav>
  <main>
    <section>
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent rutrum iaculis scelerisque. Nulla ligula nibh, venenatis a leo vel, varius tincidunt magna. Nulla consequat justo at lacus sodales ornare. Aenean quis faucibus est.</p>
      <p><em>Ut dapibus id justo tempor iaculis. Vestibulum elementum quis diam a consectetur. Nunc pellentesque purus sapien.</em></p>
      <p>Phasellus volutpat felis id libero bibendum euismod. Donec urna eros, euismod quis nisl cursus, placerat ultricies nulla. Vivamus finibus neque sit amet vestibulum posuere. Sed euismod, justo nec varius lacinia, tellus eros suscipit velit, sit amet dignissim leo nisi aliquet augue.</p>
      <h3>Fusce sagittis eleifend enim</h3>
      <p>Egestas sollicitudin. Nam at dui vel risus bibendum fringilla.</p>
      <p>Mauris tincidunt nunc lorem, vel mollis sapien sollicitudin id. Nunc aliquam nulla enim, sit amet porta quam euismod a. Sed varius vel ligula quis laoreet. Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium turpis elit, eu auctor velit suscipit non.</p>
    </section>
    <aside>
      <h2>Dulce et decorum est</h2>
      <p>Mauris sit amet eleifend tortor. Praesent vitae aliquam turpis. Quisque auctor maximus ante ac fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur vel fermentum lacus.</p>
      <ul>
        <li>cras feugiat justo non lacus auctor</li>
        <li>eget sollicitudin mi eleifend</li>
        <li>quisque pulvinar pretium risus et accumsan</li>
        <li>praesent lacus sapien</li>
      </ul>
      <p>Sed commodo ornare semper. Etiam ac pellentesque erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </aside>
  </main>
  <link href="https://fonts.googleapis.com/css?family=Oswald|Raleway:400,900" rel="stylesheet">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

由于Flexbox Implied Minimum Size，overflow-y: hidden没有new perceptron()，因此收缩率较低。

相关问题
最新问题