我有一个网站与以下结构:

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

导航栏在左边,内容div在右边。内容div的信息是通过PHP拉入的,因此每次都是不同的。

我怎样才能垂直缩放导航,使其高度与内容div的高度相同,无论哪个页面被加载?


当前回答

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

来自:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

状态引导,但你不需要引导来使用这个。回答这个老问题,因为这对我来说很管用,而且似乎很容易实现。

这和我对这个问题的回答是一样的

其他回答

.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display:         flex;
 }

来自:

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

状态引导,但你不需要引导来使用这个。回答这个老问题,因为这对我来说很管用,而且似乎很容易实现。

这和我对这个问题的回答是一样的

要做到这一点,最简单的方法就是假装。《A List Apart》多年来对此进行了广泛的报道,比如Dan Cederholm 2004年的一篇文章。

我通常是这样做的:

<div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;">
    <div id="navigation" style="float:left;width:190px;padding-right:10px;">
        <!-- Navigation -->
    </div>
    <div id="content" style="float:left;width:750px;">
        <!-- Content -->
    </div>
</div>

您可以通过将#container包装在另一个div中,将标题div嵌入为#container的兄弟,并将边缘和宽度样式移动到父容器中,轻松地在此设计中添加标题。此外,CSS应该移动到一个单独的文件,而不是保持内联等等。最后,clearfix类可以在positioniseverything上找到。

对我有效的是添加 style={{display: 'flex', overflowY: "auto"}} 给所有孩子的父母,然后 style={{overflowY: "auto"}} 对孩子本身。

下面的代码提供了设置滚动div的最小高度的能力,并通过使用flex使其具有其父div的100%高度。

CSS:

.main {
  display: flex;
  flex-direction: column;
}

.scroll {
  overflow: auto;
  flex: 1 0 50px;
}

HTML:

<div class="main">
  <div class="scroll">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

你可以把display: flex到div#主,align-self: stretch到div#导航。

<div id="header"></div>

<div id="main">
  <div id="navigation"></div>
  <div id="content"></div>
</div>

<div id="footer"></div>

// CSS file
#main {
  display: flex;
}

#navigation {
  align-self: stretch;
}