Question

我的页面左侧有一个导航div。我希望它跨越页面的整个高度。以下是结构的html和css。

#wrapper{
  position: relative;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -112px;
}
.main_wrap{
  height: 100%;
  min-height: 100%;
  position: relative;
}

.container{
  height: 100%;
  position: relative;
}
.main-sidebar{
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  height: 100%;
  width: 195px;
  z-index: 810;
}
.sidebar{
  height: 100%;
}
.content_wrap{
  height: 100%;
  min-height: 100%;
  position: relative;
}
.content_box{
  width: 1000px;
  margin: 0px auto;
}

HTML:
<div id=“wrapper>
  <div class=“main_wrap”>
    <div class=“container>
      <div class="main-sidebar">
        <div class="sidebar">
         <!—left navigation part goes here—>
        </div>
      </div>
    </div>
  </div>

  <div class=“content_wrap”>
   <div class=“content_box”>
    <!—content part goes here—>
   </div>
  </div>
</div>

非常感谢帮助。谢谢！

Answer 1

您在height中定义了#wrapper两次。如果您希望它占据100％的高度，请移除height: auto !important;，因为auto会使div适合其内容。 !important使auto覆盖您之后定义的100%。

您的wrapper课程应如下所示：

#wrapper {
  position: relative;
  min-height: 100%;
  height: 100%;
  margin: 0 auto -112px;
}

Answer 2

您可以使用vh：

 #wrapper{
  position: relative;
  height: 100vh;
  margin: 0 auto -112px;
}

但并非所有浏览器都支持它：http://caniuse.com/#feat=viewport-units

我会用javascript：

来做

   function resize()
   {
         var heights = window.innerHeight;
         document.getElementsById("wrapper").style.height = heights + "px";
   }
   resize();
   window.onresize = function() {
         resize();
   };

现在这是你的选择......

Answer 3

需要进行一些更改。删除“position：absolute”并将“float：left”添加到.main-sidebar

  def usd_cash
    transaction_currency("USD cash")
  end

  def usd_bank
    transaction_currency("USD bank")
  end

  def rub_bank
    transaction_currency("RUB bank")
  end

  private

  def transaction_currency(currency)
    @transactions = Transaction.where(location: "#{currency}")
  end

将content_wrap div放在main-sidebar div

之后

.main-sidebar{
  top: 0;
  left: 0;
  min-height: 100%;
  height: 100%;
  width: 195px;
  z-index: 810;
  float: left;
}

删除#wrapper

中高度的双重定义

...
          <div class="main-sidebar">
            <div class="sidebar">
             <!—left navigation part goes here—>
            </div>
          </div>

          <div class=“content_wrap”>
            <div class=“content_box”>
              <!—content part goes here—>
           </div>
          </div>
...

使导航div扩展页面的整个高度

3 个答案: