HTML 元素拒绝继承其父元素的高度

Posted 2023-03-06

【中文标题】HTML 元素拒绝继承其父元素的高度

【英文标题】：HTML Element refuses to inherit height of it's parent

【发布时间】：2014-06-07 06:51:28

【问题描述】：

TL;DR: ASEsideNav 不会继承其任何父项的高度，无论“!important”标签如何。我只希望侧栏与包含的大小一起缩放，以防页面延伸超过 800 像素（在很多情况下，确实如此）。做什么？

编辑 我现在为代码做了一个小提琴。第一次使用 Fiddle，希望我做对了：http://jsfiddle.net/B7k4G/

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

正如您在左侧看到的，我的可折叠导航栏与它的父级高度不匹配。我什至能够在网站上安装目录部分的唯一方法是将“最小高度”设置为 800 像素。我想要的只是让 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"    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 或 % 都不起作用。

我觉得我可能缺少一些东西？或者，也许我的格式有问题。不过，我有点害怕更改格式，因为我必须更改大量的 html 文档。必须有某种方法可以通过 CSS 解决这个问题？

在左侧，您可以看到正在渲染的网站的屏幕截图。在右侧，您可以看到类结构。在这些下方，您可以看到对 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);
      ?>

【问题讨论】：

woohhhhh...请在此处粘贴您的代码或摆弄它。它很难解码图像。

我会尽量适应 D:

好的，我为你添加了 Fiddle 链接！希望这有帮助吗？ jsfiddle.net/B7k4G

TL;DR 位于顶部，而不是中间。

我会马上为新人解决这个问题。

【参考方案1】：

由于我无法测试你的代码，我会尝试从理论上解决它

您的ASEsideNav 正在从没有高度的父元素defineMainRow 继承它的高度，因此没有什么可继承的。 尝试将defineMainRow 的高度设置为100%。您可能还必须将包含它的所有元素的高度也设置为 100%，直到父元素具有明确的高度（例如 800px），或者您到达 body 元素。

详情请参阅此 SO：CSS - make div's inherit a height

编辑

发现问题：由于引导程序的.sidebar 类，侧边栏向左浮动。浮动 div 从定位元素的常规流中取出，不知道它的父元素或兄弟元素，因此它不能继承父元素的高度。

遗憾的是，由于布局基于浮动侧边栏，因此没有快速简便的解决方案

选项A：使用当前侧边栏

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

【讨论】：

我正在尝试为它制作一个小提琴，但我以前没有使用过小提琴。完成后，我会尽快在另一条评论中发布链接。

好吧，我认为这应该可行。希望您能找到导致问题的原因？ jsfiddle.net/B7k4G

我敢打赌这很可能是问题所在。只有当父级具有已知的特定高度时，子级才能继承父级的身高。

哇！真是个小问题……对于初学者来说，id 标签的概念是它应该是唯一的，在一个页面中永远不要有两个具有相同 id 的元素。您应该为此使用类。此外，由于小提琴的庞大规模，这将需要很长时间，但我最终可能会弄清楚，我通常建议在 jsfiddle 中制作一个极简主义的例子。

@Isuress，我刚刚看到一个链接，通过一个相当巧妙的解决方案讨论了您的确切问题：matthewjamestaylor.com/blog/…。祝你好运，不要放弃