修改

Question

TL; DR： ASEsideNav不会继承任何父母的身高，无论其重要的是什么？＃34;标签。我只是希望侧栏按照包含的大小进行缩放，以防页面延伸超过800px（在很多情况下，它确实如此）。怎么办？

修改我现在为代码做了一个小提琴。第一次使用Fiddle，希望我做得正确：
http://jsfiddle.net/B7k4G/

请参阅下面的图片。我在图片中包含了屏幕截图，代码和页面布局。我没有能力将它嵌入到这个主题中，并且图像有多大，无论如何它都不是一个好主意。继续〜
http://i.imgur.com/u0PXRGb.png

正如您在左侧看到的那样，我的可折叠导航栏与其父级的高度不匹配。我甚至能够在网站上放置目录部分的唯一方法是设置一个最小高度＆＃34;到800px。我想要的是ASEsideNav匹配defineMainRow或contentContainer的高度，它们都是ASEwrapper的子节点。

        <div class="col-xs-3 sidebar" id="ASEsideNav">
      <!-- This is left Vertical Nav bar -->
      <div class="navbar navbar-inverse" id="ASEsideNav">

      <!-- This is the heading -->
      <div id="ASEsideHeader">
        <h3 id="ASEheading">Our Products</h3>
      </div>

        <div class="collapse navbar-collapse" id="ASEsideNav">
          <ul class="nav nav-stacked" id="menu-bar"> <!-- Notice the "nav-stacked" class we added here -->
          </ul>

          <!-- This is the catalogue section -->
          <div>
            <div id="ASEsideHeader">
              <h3 id="ASEheading">Download Catalog</h3>
            </div>
            <div>
              <a href="/ase_site_new/downloads/catalog2009.pdf"><img src="/ase_site_new/images/catalog2009.png" width="228" height="168" alt="Download Catalog" class="center-block"></a>
            </div>
          </div>

        </div> <!-- End of navbar-collapse -->
      </div> <!-- End of navbar-inverse -->
    </div> <!-- End of row -->

我尝试了很多与高度，最小高度和显示有关的不同属性，但无济于事。我甚至在Firebug和Firefox的本地检查员中使用它，并且无法让ASEsideNav做我想做的事情。没有Auto，inherit或％work。

我觉得我可能会遗漏一些东西？或者我可能有错误的格式。虽然，我有点害怕改变格式，因为我必须更改大量的HTML文档。必须有一些方法来解决这个问题吗？

在左侧，您可以看到正在呈现的网站的屏幕截图。在右侧，您可以看到类结构。在这些之下，您可以看到对HTML和CSS的引用。

  <!-- This where the website begins -->

<!-- Applies black container shadow -->
<div id="ASEwrapper">

  <!-- This imports the top portion of the website -->
  <?php 
    $path = $_SERVER['DOCUMENT_ROOT'];
    $path .= "/ase_site_new/import/import_navtop.html";
    include_once($path);
  ?>

  <!-- These are the breadcrumbs that show the page progession -->
  <div class="container">
    <div class="row">
      <div class="col-xs-12" id="ASEbreadcrumbs">
        <ol class="breadcrumb">
          <li class="active">Home</li>
        </ol>
      </div>
    </div>
  </div>

  <div class="container" id="contentContainer">
    <div class="row" id="defineMainRow">

      <!-- This imports the side bar navigation of the website -->
      <?php 
        $path = $_SERVER['DOCUMENT_ROOT'];
        $path .= "/ase_site_new/import/import_navside.html";
        include_once($path);
      ?>

enter image description here

Answer 1

由于我无法测试您的代码，我将尝试在理论上解决它

你的ASEsideNav继承了父元素defineMainRow的高度，而父元素defineMainRow没有高度，所以没有任何东西可以继承。尝试将100%的身高设置为100%。您可能必须将包含它的所有元素的高度设置为800px，直到父元素具有显式高度（例如。.sidebar），或者您到达body元素。

有关详细信息，请参阅此SO：CSS - make div's inherit a height

修改

发现问题：由于bootstrap的{{1}}类，侧边栏浮动到左侧。浮动div从常规元素的常规流中取出，并且不知道它的父元素或兄弟元素，因此它不能继承父元素的高度。

遗憾的是，没有快速简单的解决方案，因为布局基于浮动的侧边栏，所以

选项A：与当前侧边栏一起使用

或B：重新设计你的布局，我认为这是最好的行动方案。删除内容并专注于页眉，页脚，侧边栏和内容的布局。你会发现很多教程可以帮助你，SO是一个很好的起点： HTML page with a standard header footer layout without using table tag

HTML元素拒绝继承它的父级的高度

1 个答案:

修改